Check 单复选
优质
小牛编辑
131浏览
2023-12-01
使用指南
组件介绍
Check 组件模拟原生单复选框
引入方式
import { Check } from 'feart';
components: {
"fe-check": Check,
},
data() {
return {
list: ['安徽', '浙江', '北京'],
list1: ['安徽1', '浙江1', '北京1'],
defaultList: ['安徽1', , '浙江1'],
objectList: [
{key: '1', value: '001 value'},
{key: '2', value: '002 value'},
{key: '3', value: '003 value'}
],
objectListValue: ['1', '2'],
};
}
代码演示
单选(无法取消勾选)
<fe-check :options="list" title="单选" :max="1" :min="1" :require="true"></fe-check>
复选
<fe-check :options="list" title="复选"></fe-check>
最多选两个
<fe-check :options="list1" title="最多选两个" :max="2"></fe-check>
最少选一个
<fe-check :options="list1" title="最少选一个" :min="1" :require="true"></fe-check>
禁用
<fe-check :options="list1" title="禁用" :disabled="true" v-model="defaultList"></fe-check>
禁用
<fe-check :options="list1" title="禁用" :disabled="true" v-model="defaultList"></fe-check>
Object 类型的选项列表
<fe-check
ref="objectList"
:options="objectList"
title="Object 类型的选项列表"
@on-change="handleChange"
v-model="objectListValue"
></fe-check>
API
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
value | 表单值,使用 v-model 绑定 | String |
- | - |
options | 选项列表,可以为[{key:'name',value:'value'}]的形式 | - | - | |
min | 最少可选个数 | Number |
- | - |
max | 最多可选个数 | Number |
- | - |
required | 是否必选 | Boolean |
false |
true ,false |
disabled | 是否禁用 | Boolean |
false |
true ,false |
- | - | - | - | - |
Events
参数 | 说明 | 参数 | 备注 |
---|---|---|---|
on-change |
值变化时触发 | value, label | - |
- | - | - | - |
Methods
参数 | 说明 | 参数 | 备注 |
---|---|---|---|
getFullValue |
获取值和对应的显示文字 | - | - |
- | - | - | - |