<template>
<div style="background:#f6f6f6">
<lc-title title="复选按钮组"></lc-title>
<category title="基本用法"></category>
<div>
<lc-cell>
<span slot="title"><lc-checkboxgroup :checkBoxData="data1" v-model="group1"></lc-checkboxgroup></span>
</lc-cell>
<p>{{group1}}</p>
</div>
<category title="禁用状态"></category>
<div>
<lc-cell>
<span slot="title"><lc-checkboxgroup :checkBoxData="data2" v-model="group2"></lc-checkboxgroup></span>
</lc-cell>
</div>
<category title="自定义尺寸"></category>
<div>
<lc-cell>
<span slot="title"><lc-checkboxgroup :size="'small'" :checkBoxData="data3" v-model="group3"></lc-checkboxgroup></span>
</lc-cell>
<lc-cell>
<span slot="title"><lc-checkboxgroup :size="'base'" :checkBoxData="data3" v-model="group4"></lc-checkboxgroup></span>
</lc-cell>
<lc-cell>
<span slot="title"><lc-checkboxgroup :checkBoxData="data33" :size="'small'" v-model="group5"></lc-checkboxgroup></span>
</lc-cell>
<p>size可选值：'small', 'base', 'large'</p>
<p>data设置size属性高于标签size</p>
</div>
<category title="禁用动效"></category>
<div>
<lc-cell>
<span slot="title"><lc-checkboxgroup :checkBoxData="['选项1','选项2']" v-model="group6" :animation="false" ></lc-checkboxgroup></span>
</lc-cell>
<p>选择状态：{{group6}}</p>
<p>animation属性值为false时，禁用自带动效 </p>
</div>
<category title="横向排列"></category>
<div>
<lc-cell>
<span slot="title"><lc-checkboxgroup :checkBoxData="data5" v-model="group7" :vertical="true"></lc-checkboxgroup></span>
</lc-cell>
<p>avertical属性值为true时，横向排列 </p>
<p>状态：label值与选中value值不同时，{{group7}}</p>
</div>
<category title="事件"></category>
<div>
<lc-cell>
<span slot="title"><lc-checkboxgroup :checkBoxData="data6" v-model="group0" @change="changeEvt"></lc-checkboxgroup></span>
</lc-cell>
<p>选择状态：{{group0}}</p>
<p>值发生变化时，将触发change事件</p>
</div>
<category title="自定义样式"></category>
<div>
<lc-cell>
<span slot="title"><lc-checkboxgroup :customClass="'my-checkbox'" :checkBoxData="data7" v-model="group8"></lc-checkboxgroup></span>
</lc-cell>
</div>
</div>
</template>
<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
components: { LcTitle, Category },
data() {
return {
result:'',
result2:'',
group0: ['选项1'],
group1: ['选项A'],
group2: ['选项2'],
group3: ['备选项'],
group4: ['备选项'],
group5: ['备选项'],
group6: ['选项1'],
group7: ['B'],
group8: ['选项1'],
data1:[
{id:11,value:'选项A',label:'选项A'},
{id:12,value:'选项B',label:'选项B'},
{id:13,value:'选项C',label:'选项C'},
{id:14,value:'选项D',label:'选项D'},
],
data2:[
{id:21,value:'选项1',label:'选项1',disabled:true},
{id:22,value:'选项2',label:'选项2',disabled:true},
],
data3:[
{id:31,value:'备选项',label:'备选项'},
],
data33:[
{id:31,value:'备选项',label:'备选项',size:'large'},
],
data4:[
{id:41,value:'选项1',label:'选项1'},
{id:42,value:'选项2',label:'选项2'},
],
data5:[
{id:51,value:'A',label:'选项1'},
{id:52,value:'B',label:'选项2'},
{id:53,value:'C',label:'选项3'},
{id:54,value:'D',label:'选项4'},
],
data6:[
{id:51,value:'选项1',label:'选项1'},
{id:52,value:'选项2',label:'选项2'},
{id:53,value:'选项3',label:'选项3'},
{id:54,value:'选项4',label:'选项4'},
],
data7:[
{id:41,value:'选项1',label:'选项1'},
{id:42,value:'选项2',label:'选项2'},
],
};
},
methods: {
changeEvt(val,label,e){
console.log(0,val,label,e)
alert('已选值:['+ val+']，当前选择值：'+ label);
},
}
};
</script>
<style lang="less" >
.nut-checkboxgroup {
&.my-checkbox{
padding: 0;
.checkbox-item{
padding: 10px 0 6px;
margin-right: 0;
border-bottom: 1px solid #efefef;
}
.nut-checkbox {
input:checked {
background-image: radial-gradient(
circle,
#fff 0%,
#fff 100%,
#0785DB 60%
);
background-size: 50% 50%;
border:none;
}
}
}
}
p{ line-height: 26px; padding:10px; font-size: 14px;}
</style>
|
