Check 单复选

优质

小牛编辑

129浏览

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`	获取值和对应的显示文字	-	-
-	-	-	-