当前位置: 首页 > 文档资料 > FeArt 中文文档 >

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