室内装修网站模板,dedecms 购物网站,湘潭自适应网站建设 磐石网络,教育系统网站cms目录
#平台差异说明
#基本使用
#自定义形状
#禁用checkbox
#自定义形状
#自定义颜色
#横向排列形式
#横向两端排列形式
API
#Checkbox Props
#CheckboxGroup Props
#CheckboxGroup Event 复选框组件一般用于需要多个选择的场景#xff0c;该组件功能完整#xff…
目录
#平台差异说明
#基本使用
#自定义形状
#禁用checkbox
#自定义形状
#自定义颜色
#横向排列形式
#横向两端排列形式
API
#Checkbox Props
#CheckboxGroup Props
#CheckboxGroup Event 复选框组件一般用于需要多个选择的场景该组件功能完整使用方便
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
templateviewu-checkbox-groupv-modelcheckboxValue1placementcolumnchangecheckboxChangeu-checkbox:customStyle{marginBottom: 8px}v-for(item, index) in checkboxList1:keyindex:labelitem.name:nameitem.name/u-checkbox/u-checkbox-group/view
/template
script
export default {data() {return {checkboxValue1:[],// 基本案列数据checkboxList1: [{name: 苹果,disabled: false},{name: 香蕉,disabled: false},{name: 橙子,disabled: false}],}},methods: {checkboxChange(n) {console.log(change, n);}}
}
/scriptcopy
#自定义形状
通过shape可以设置选择形状
templateviewu-checkbox-groupv-modelcheckboxValue1placementcolumnchangecheckboxChangeu-checkbox:customStyle{marginBottom: 8px}v-for(item, index) in checkboxList1:keyindex:labelitem.name:nameitem.name/u-checkbox/u-checkbox-group/view
/template
script
export default {data() {return {checkboxValue1:[],// 基本案列数据checkboxList1: [{name: 苹果,disabled: false},{name: 香蕉,disabled: false},{name: 橙子,disabled: false}],}},methods: {checkboxChange(n) {console.log(change, n);}}
}
/scriptcopy
#禁用checkbox
设置disabled为true即可禁用某个组件让用户无法点击禁用分为两种状态一是未勾选前禁用这时只显示一个灰色的区域。二是已勾选后 再禁用会有灰色的已勾选的图标但此时依然是不可操作的。
templateviewu-checkbox-groupv-modelcheckboxValue1placementcolumnchangecheckboxChangeu-checkbox:customStyle{marginBottom: 8px}v-for(item, index) in checkboxList1:keyindex:labelitem.name:nameitem.name:disableditem.disabled/u-checkbox/u-checkbox-group/view
/template
script
export default {data() {return {checkboxValue1:[],// 基本案列数据checkboxList1: [{name: 苹果,disabled: false},{name: 香蕉,disabled: false},{name: 橙子,disabled: true}],}},methods: {checkboxChange(n) {console.log(change, n);}}
}
/scriptcopy
#自定义形状
可以通过设置shape为square或者circle将复选框设置为方形或者圆形
u-checkbox-groupu-checkbox v-modelchecked shapecircle label明月/u-checkbox
/u-checkbox-groupcopy
#自定义颜色
此处所指的颜色为checkbox选中时的背景颜色参数为activeColor
u-checkbox-group v-modelcheckedu-checkbox activeColorred label光影/u-checkbox
/u-checkbox-groupcopy
#横向排列形式
可以通过设置placement为row或者column将复选框设置为横向排列或者竖向排列
u-checkbox-group v-modelchecked placementrowu-checkbox activeColorred label红色/u-checkboxu-checkbox activeColorgreen label绿色/u-checkbox
/u-checkbox-groupcopy
#横向两端排列形式
可以通过设置iconPlacement为left或者right将复选框勾选图标的对齐设置为左对齐或者右对齐
u-checkbox-group v-modelcheckediconPlacementright placementrowu-checkbox activeColorred label红色/u-checkboxu-checkbox activeColorgreen label绿色/u-checkbox
/u-checkbox-group
API
#Checkbox Props
参数说明类型默认值可选值namecheckbox的名称String \ Number \ Boolean--shape形状square为方形circle为圆型Stringsquarecirclesize整体的大小String \ Number--checked是否默认选中Booleanfalsetruedisabled是否禁用String \ Boolean--activeColor选中状态下的颜色如设置此值将会覆盖parent的activeColor值String--inactiveColor未选中的颜色String--iconSize图标的大小单位pxString \ Number--iconColor图标颜色String--labellabel提示文字因为nvue下直接slot进来的文字由于特殊的结构无法修改样式String \ Number--labelSizelabel的字体大小px单位String \ Number--labelColorlabel的颜色String--labelDisabled是否禁止点击提示语选中复选框String \ Boolean--
#CheckboxGroup Props
参数说明类型默认值可选值name标识符String--value绑定的值Array[]-shape形状circle-圆形square-方形Stringsquarecircledisabled是否禁用全部checkboxBooleanfalsetrueactiveColor选中状态下的颜色如子Checkbox组件设置此值将会覆盖本值String#2979ff-inactiveColor未选中的颜色String#c8c9cc-size整个组件的尺寸默认pxString18-placement布局方式row-横向column-纵向BooleanrowcolumnlabelSizelabel的字体大小px单位String \ Number14-labelColorlabel的字体颜色String#303133-labelDisabled是否禁止点击文本操作BooleanfalsetrueiconColor图标颜色String#ffffff-iconSize图标的大小单位pxString \ Number12-iconPlacement勾选图标的对齐方式left-左边right-右边StringleftrightborderBottom竖向配列时是否显示下划线Booleanfalsetrue
#CheckboxGroup Event
事件名说明回调参数版本change任一个checkbox状态发生变化时触发回调为一个对象detail array( [元素为被选中的checkbox的name] )-
