Kitao NPM | npm.io

input框使用

<k-input v-model="input" label="label" required/>
<!-- errors: 需要校验时，报错提示， 类型Array -->
<!-- required： 是否必填项，Boolean类型，默认false -->
<!-- submitted 是否点击提交或者校验按钮，Boolean类型，默认false -->
<!-- showLabel 是否显示label标签，Boolean类型，默认true -->
<!-- disabled  是否有效，Boolean类型，默认false -->
<!-- type input类型， String类型，默认text, 支持原生所有的input的type -->
<!-- append 后置内容 -->
<!-- prepend 前置内容 -->
<!-- placeholder  String类型，默认: 请输入-->
<!-- maxLength  长度限制。 默认 20 -->
<!-- @change事件 -->

select框使用

<k-select v-model="input" label="label" options="options"/>
<!-- errors: 需要校验时，报错提示， 类型Array -->
<!-- attr: 类型Object, 当options的内容，不是用label,value时，用attr做映射，例如，数组传的是[{name: 'xxx', id: 'xxxx'}], attr ={label: 'name',value: 'id'} -->
<!-- options：数组，格式为 options = [{label: 'label1',value: 'value1}] -->
<!-- required： 是否必填项，Boolean类型，默认false -->
<!-- submitted 是否点击提交或者校验按钮，Boolean类型，默认false -->
<!-- showLabel 是否显示label标签，Boolean类型，默认true -->
<!-- disabled  是否有效，Boolean类型，默认false -->
<!-- placeholder  String类型，默认: 请输入-->
<!-- maxLength  长度限制。 默认 20 -->
<!-- @change事件 -->

k-search 带有搜索功能的下拉框

<k-search v-model="value" :options="options">
<!-- options：数组，格式为 options = [{label: 'label1',value: 'value1}] -->
<!-- attr: 类型Object, 当options的内容，不是用label,value时，用attr做映射，例如，数组传的是[{name: 'xxx', id: 'xxxx'}], attr ={label: 'name',value: 'id'} -->
<!-- errors: 需要校验时，报错提示， 类型Array -->
<!-- required： 是否必填项，Boolean类型，默认false -->
<!-- submitted 是否点击提交或者校验按钮，Boolean类型，默认false -->
<!-- showLabel 是否显示label标签，Boolean类型，默认true -->
<!-- disabled  是否有效，Boolean类型，默认false -->
<!-- placeholder  String类型，默认: 请输入-->
<!-- onlyShowName:  Boolean类型, 下拉框列表是否仅显示options中的label字段，默认true，如传false，则显示 label_vale的格式-->

textarea框

<k-textarea v-model="textarea" label="label"/>
<!-- errors: 需要校验时，报错提示， 类型Array -->
<!-- required： 是否必填项，Boolean类型，默认false -->
<!-- submitted 是否点击提交或者校验按钮，Boolean类型，默认false -->
<!-- showLabel 是否显示label标签，Boolean类型，默认true -->
<!-- disabled  是否有效，Boolean类型，默认false -->
<!-- placeholder  String类型，默认: 请输入-->
<!-- maxLength  长度限制。 默认 20 -->
<!-- @change事件 -->

分页

<k-pagination  :page="page" @handleCurrentChange/>
<!-- page: {current: 1, size: 10, total: 1}  current: 当前页， size：多少条数据， total：总共-->
<!-- @handleCurrentChange   current切换，size切换后的回调事件-->

loading框

<k-loading  v-if="show"/>
<!-- show: 控制loading 的显示与隐藏-->

kPickr

<k-pickr v-model="value">
<!-- errors: 需要校验时，报错提示， 类型Array -->
<!-- required： 是否必填项，Boolean类型，默认false -->
<!-- submitted 是否点击提交或者校验按钮，Boolean类型，默认false -->
<!-- showLabel 是否显示label标签，Boolean类型，默认true -->
<!-- disabled  是否有效，Boolean类型，默认false -->
<!-- placeholder  String类型，默认: 请输入-->
<!-- maxLength  长度限制。 默认 20 -->
<!-- dateFormat,事件格式化，string类型， 默认："Y/m/d"，比如2023/4/27 -->
<!-- locale 多语言，默认获取缓存的值 其次浏览器的默认语言，支持中：zh-cn，英：en，韩：ko-kr-->