bmy/Vue_dbui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 00:57:27 +08:00
commit 18df0f5e4b
2548 changed files with 253280 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
vue-ydui/example/routers/checklist.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<yd-layout title="CheckList">
<div style="padding-left:12px;margin-bottom: 10px;" class="demo-small-pitch">
<yd-checkbox v-model="isCheckAll" shape="circle" :change="checkAll">全选 {{isCheckAll}} - <span style="font-size: 12px;">结合yd-checkbox组件实现全选</span></yd-checkbox>
</div>
<yd-checklist v-model="checklist1" ref="checklistDemo" :callback="change">
<yd-checklist-item val="1">
<div style="height: 50px;line-height: 50px;">1 -- 值：{{checklist1}}</div>
</yd-checklist-item>
<yd-checklist-item val="2">
<div style="height: 50px;line-height: 50px;">2</div>
</yd-checklist-item>
<yd-checklist-item val="3">
<div style="height: 50px;line-height: 50px;">3</div>
</yd-checklist-item>
</yd-checklist>
<yd-checklist v-model="checklist2" class="demo-small-pitch" :label="false" :callback="fn">
<yd-checklist-item val="aaa" :change="handleChange">
<yd-flexbox style="padding: 15px 0;">
<img src="//img12.360buyimg.com/n1/jfs/t2122/170/1006550413/171711/de099a6f/56399d01N67907749.jpg" class="demo-checklist-img">
<yd-flexbox-item align="top">
[aaa] 类似购物车 / 类似购物车<br/>
<span style="color: blue;">点击这边的内容是禁止选中的</span><br/>
<p style="color:#F00;">选中值：{{checklist2}}</p>
</yd-flexbox-item>
</yd-flexbox>
</yd-checklist-item>
<yd-checklist-item val="bbb" :change="handleChange">
<yd-flexbox style="padding: 15px 0;">
<img src="//img10.360buyimg.com/n1/jfs/t6925/75/2382158459/437865/f3931d24/598be5b1N24d949fe.jpg" class="demo-checklist-img">
<yd-flexbox-item align="top">
[bbb] 南非进口红西柚 6个 单果重约300-330g 新鲜水果
</yd-flexbox-item>
</yd-flexbox>
</yd-checklist-item>
<yd-checklist-item val="ccc" :change="handleChange">
<yd-flexbox style="padding: 15px 0;">
<img src="//img14.360buyimg.com/n1/jfs/t3232/69/539717695/176729/cf1ff3d8/57baa5d1N901ffea5.jpg" class="demo-checklist-img">
<yd-flexbox-item align="top">
[ccc] 展卉 越南进口红心火龙果 3个装中果 单果约300~350g 新鲜水果
</yd-flexbox-item>
</yd-flexbox>
</yd-checklist-item>
</yd-checklist>
</yd-layout>
</template>
<script type="text/babel">
export default {
data() {
return {
checklist1: [1],
checklist2: [],
isCheckAll: false
}
},
methods: {
fn(val, isCheckAll) {
console.log('来自 yd-checklist 的回调：是否全选：' + isCheckAll, '当前所选值是：' + JSON.stringify(val));
},
handleChange(val, isCheck) {
console.log('来自 yd-checklist-item 的回调：是否选中：' + isCheck, '值是：' + JSON.stringify(val));
},
change(value, isCheckAll) {
this.isCheckAll = isCheckAll;
},
checkAll() {
this.isCheckAll = !this.isCheckAll;
this.$refs.checklistDemo.$emit('ydui.checklist.checkall', this.isCheckAll);
}
}
}
</script>