Checklist

Checklist

demo 原始链接demo 源码编辑文档组件源码

checklist - 图1

二维码

checklist - 图2

Install

安装

局部注册

全局注册

  1. import { Checklist } from 'vux'
  2. export default {
  3. components: {
  4. Checklist
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Checklist } from 'vux'
  4. Vue.component('checklist', Checklist)

从 v2.6.2 开始,max=1即为单选模式,不会要求先取消上一个选中的才能选中下一个值。

API

属性

名字类型默认值说明版本要求
valuearray[]表单值
titlestring标题
requiredbooleanfalse是否为必选
optionsarray[]选项列表,可以为[{key:'name',value:'value',inlineDesc:'inlineDesc'}]的形式
maxnumber最多可选个数
minnumber最少可选个数
random-orderbooleanfalse是否随机打乱选项顺序
check-disabledbooleantrue是否进行可选检测,默认情况下当选择个数等于可选个数(max)时,其他项不可选择。该选项主要适用于从多个选项列表中收集值的场景。注意的该选项设为 false 时 max 设置将失效。v2.2.1-rc.1
label-positionstringrightlabel 位置,可以设置为 left 或者 rightv2.2.1-rc.4
disabledstring是否禁用操作v2.3.8

事件

名字参数说明版本要求
@on-change(value, label)值变化时触发,参数为 (value, label),其中 label 参数在 v2.5.7 后支持

方法

名字参数说明版本要求
getFullValue获取值和对应的显示文字v2.6.4

Variables

## 样式变量


名字默认值说明继承自变量
@checklist-icon-active-color #09BB07

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 32,贡献人数 5
Estelle00airylandQiongrong Jiang万刚greedying

Changelog

发布日志

  • v2.7.0 [fix] 修复默认选中项缺失问题 #2122
  • v2.6.5 [fix] 修复仅调用 checklist 组件时图标样式不存在 #2041
  • v2.6.5 [fix] 在created时,初始化tempValue值 #2059
  • v2.6.4 [feature] 添加方法 getFullValue 获取值和对应的显示文字 #2022
  • v2.6.3 [fix] on-change 参数支持 labels #2018
  • v2.6.2 [feature] 支持 max=1 交互为单选模式 #1996
  • v2.5.7 [feature] 支持在 on-change 事件中附带 label 值 #1783
  • v2.3.8 [feature] 支持 prop:disabled 禁用操作 #1254
  • v2.2.1-rc.4 [feature] 支持通过 prop:label-position 设置 label位置
  • v2.2.1-rc.1 [feature] 支持 prop:check-disabled
  • v2.0.0 [change] 默认不显示错误,你可以监听on-error事件结合slot进行处理和显示
  • v2.0.0 [feature] 添加插槽 footer、after-title
  • v2.0.0 [change] 如果已经达到max上限,没有选中的选项将不能选择,因此不再和之前版本一样会出现最多可选max个的error信息
  • v2.0.0 [change] 默认 required 值为false, 与html规范一致
  • v2.5.2 [fix] 在 on-change 事件之前 emit input 事件
  • v2.5.2 [feature] options 中增加 inlineDesc 属性