mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
114 lines
2.5 KiB
Plaintext
114 lines
2.5 KiB
Plaintext
<demo-block title="基本用法">
|
|
<van-checkbox
|
|
value="{{ checkbox1 }}"
|
|
data-key="checkbox1"
|
|
custom-class="demo-checkbox"
|
|
bind:change="onChange"
|
|
>
|
|
复选框
|
|
</van-checkbox>
|
|
</demo-block>
|
|
|
|
<demo-block title="禁用状态">
|
|
<van-checkbox
|
|
disabled
|
|
value="{{ false }}"
|
|
custom-class="demo-checkbox"
|
|
>
|
|
复选框
|
|
</van-checkbox>
|
|
<van-checkbox
|
|
disabled
|
|
value="{{ true }}"
|
|
custom-class="demo-checkbox"
|
|
>
|
|
复选框
|
|
</van-checkbox>
|
|
</demo-block>
|
|
|
|
<demo-block title="自定义形状">
|
|
<van-checkbox
|
|
value="{{ checkboxShape }}"
|
|
data-key="checkboxShape"
|
|
shape="square"
|
|
custom-class="demo-checkbox"
|
|
bind:change="onChange"
|
|
>
|
|
复选框
|
|
</van-checkbox>
|
|
</demo-block>
|
|
|
|
<demo-block title="自定义颜色">
|
|
<van-checkbox
|
|
value="{{ checkbox2 }}"
|
|
data-key="checkbox2"
|
|
checked-color="#07c160"
|
|
custom-class="demo-checkbox"
|
|
bind:change="onChange"
|
|
>
|
|
复选框
|
|
</van-checkbox>
|
|
</demo-block>
|
|
|
|
<demo-block title="自定义图标">
|
|
<van-checkbox
|
|
use-icon-slot
|
|
value="{{ checkbox3 }}"
|
|
data-key="checkbox3"
|
|
custom-class="demo-checkbox"
|
|
bind:change="onChange"
|
|
>
|
|
自定义图标
|
|
<image
|
|
slot="icon"
|
|
class="icon"
|
|
mode="widthFix"
|
|
src="{{ checkbox3 ? activeIcon : inactiveIcon }}"
|
|
/>
|
|
</van-checkbox>
|
|
</demo-block>
|
|
|
|
<demo-block title="复选框组">
|
|
<van-checkbox-group value="{{ result }}" data-key="result" bind:change="onChange">
|
|
<van-checkbox
|
|
wx:for="{{ list }}"
|
|
wx:key="*this"
|
|
name="{{ item }}"
|
|
custom-class="demo-checkbox"
|
|
>
|
|
复选框 {{ item }}
|
|
</van-checkbox>
|
|
</van-checkbox-group>
|
|
</demo-block>
|
|
|
|
<demo-block title="设置最大可选数">
|
|
<van-checkbox-group value="{{ result2 }}" data-key="result2" max="2" bind:change="onChange">
|
|
<van-checkbox
|
|
wx:for="{{ list }}"
|
|
wx:key="*this"
|
|
name="{{ item }}"
|
|
custom-class="demo-checkbox"
|
|
>
|
|
复选框 {{ item }}
|
|
</van-checkbox>
|
|
</van-checkbox-group>
|
|
</demo-block>
|
|
|
|
<demo-block title="搭配单元格组件使用">
|
|
<van-checkbox-group value="{{ result3 }}" data-key="result3" bind:change="onChange">
|
|
<van-cell-group >
|
|
<van-cell
|
|
wx:for="{{ list }}"
|
|
wx:key="*this"
|
|
title="复选框 {{ item }}"
|
|
value-class="value-class"
|
|
clickable
|
|
data-index="{{ index }}"
|
|
bind:click="toggle"
|
|
>
|
|
<van-checkbox catch:tap="noop" class="checkboxes-{{ index }}" name="{{ item }}" />
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</van-checkbox-group>
|
|
</demo-block>
|