mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Checkbox: support custom icon (#1414)
This commit is contained in:
neverland
GitHub
parent
0149dc0976
commit
a0602c81d5
@ -9,8 +9,15 @@
|
||||
<van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('labelDisabled')">
|
||||
<van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
<demo-block :title="$t('customIcon')">
|
||||
<van-checkbox v-model="checkbox2">
|
||||
{{ $t('customIcon') }}
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
@ -54,14 +61,14 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
checkbox: '复选框',
|
||||
labelDisabled: '禁用内容部分点击事件',
|
||||
customIcon: '自定义图标',
|
||||
title3: 'Checkbox 组',
|
||||
title4: '设置最大可选数',
|
||||
title5: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
labelDisabled: 'Disable Label click event',
|
||||
customIcon: 'Custom Icon',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Maximum amount of checked options',
|
||||
title5: 'Inside a Cell'
|
||||
@ -79,7 +86,11 @@ export default {
|
||||
],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
result3: []
|
||||
result3: [],
|
||||
icon: {
|
||||
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -96,5 +107,10 @@ export default {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,10 +31,30 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Disable Label click event
|
||||
#### Custom Icon
|
||||
Use icon slot to custom icon
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
<van-checkbox v-model="checked">
|
||||
Custom Icon
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-checkbox>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
checked: true,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Checkbox Group
|
||||
@ -119,3 +139,10 @@ export default {
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value changed | current value |
|
||||
|
||||
### Checkbox Slot
|
||||
|
||||
| Name | Description | slot-scope |
|
||||
|-----------|-----------|-----------|
|
||||
| default | Custom label | - |
|
||||
| icon | Custom icon | checked: whether to be checked |
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<icon
|
||||
name="success"
|
||||
:class="[
|
||||
b('icon'),
|
||||
`van-checkbox--${shape}`, {
|
||||
'van-checkbox--disabled': isDisabled,
|
||||
'van-checkbox--checked': checked
|
||||
}]"
|
||||
@click="onClick"
|
||||
/>
|
||||
<div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="onClick">
|
||||
<slot name="icon" :checked="checked">
|
||||
<icon name="success" />
|
||||
</slot>
|
||||
</div>
|
||||
<span v-if="$slots.default" :class="b('label', labelPosition)" @click="onClick('label')">
|
||||
<slot />
|
||||
</span>
|
||||
|
||||
@ -4,44 +4,58 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">复选框</span></div>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">复选框</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--disabled" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">复选框</span></div>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">复选框</span></div>
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--disabled van-checkbox--checked" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">复选框</span></div>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">复选框</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">复选框</span></div>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
|
||||
<img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png">
|
||||
</div> <span class="van-checkbox__label">
|
||||
自定义图标
|
||||
</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox-group">
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">
|
||||
复选框 a
|
||||
</span></div>
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">
|
||||
复选框 b
|
||||
</span></div>
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">
|
||||
复选框 c
|
||||
</span></div>
|
||||
</div>
|
||||
@ -49,21 +63,27 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-checkbox-group">
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">
|
||||
复选框 a
|
||||
</span></div>
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">
|
||||
复选框 b
|
||||
</span></div>
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">
|
||||
复选框 c
|
||||
</span></div>
|
||||
</div>
|
||||
@ -78,9 +98,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
@ -93,9 +115,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
@ -108,9 +132,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -32,10 +32,30 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### 禁用内容部分点击事件
|
||||
#### 自定义图标
|
||||
通过 icon slot 自定义图标，可以通过 `slot-scope` 判断是否为选中状态
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
|
||||
<van-checkbox v-model="checked">
|
||||
自定义图标
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-checkbox>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
checked: true,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Checkbox 组
|
||||
@ -123,3 +143,10 @@ export default {
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
### Checkbox Slot
|
||||
|
||||
| 名称 | 说明 | slot-scope |
|
||||
|-----------|-----------|-----------|
|
||||
| default | 自定义文本 | - |
|
||||
| icon | 自定义图标 | checked: 是否为选中状态 |
|
||||
|
||||
@ -89,7 +89,7 @@ export default {
|
||||
}
|
||||
|
||||
.van-edit-address {
|
||||
color: #38F;
|
||||
color: #38f;
|
||||
}
|
||||
|
||||
.van-checkbox {
|
||||
|
||||
@ -47,9 +47,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-checkbox">
|
||||
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
|
||||
<!---->
|
||||
</i> <span class="van-checkbox__label">全选</span></div>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
|
||||
<i class="van-icon van-icon-success" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div> <span class="van-checkbox__label">全选</span></div>
|
||||
<div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</span></div>
|
||||
<button class="van-button van-button--danger van-button--normal">
|
||||
<!----><span class="van-button__text">
|
||||
|
||||
@ -13,9 +13,11 @@
|
||||
<van-tabbar v-model="active2">
|
||||
<van-tabbar-item icon="shop">
|
||||
<span>{{ $t('custom') }}</span>
|
||||
<template slot="icon" slot-scope="props">
|
||||
<img :src="props.active ? icon.active : icon.normal" >
|
||||
</template>
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.active ? icon.active : icon.normal"
|
||||
>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>
|
||||
|
||||
@ -37,9 +37,11 @@ Use `icon` slot to custom icon
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">
|
||||
<span>Custom</span>
|
||||
<template slot="icon" slot-scope="props">
|
||||
<img :src="props.active ? icon.active : icon.normal" />
|
||||
</template>
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.active ? icon.active : icon.normal"
|
||||
>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">Tab</van-tabbar-item>
|
||||
@ -52,8 +54,8 @@ export default {
|
||||
return {
|
||||
active: 0,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/1.png',
|
||||
active: '//img.yzcdn.cn/2.png'
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -87,6 +89,6 @@ export default {
|
||||
|
||||
### TabbarItem Slot
|
||||
|
||||
| Name | Description | Scope |
|
||||
| Name | Description | slot-scope |
|
||||
|-----------|-----------|-----------|
|
||||
| icon | Custom icon | active |
|
||||
|
||||
@ -33,16 +33,17 @@ export default {
|
||||
|
||||
|
||||
#### 自定义图标
|
||||
通过 icon slot 自定义图标
|
||||
|
||||
通过 icon slot 自定义图标，可以通过 `slot-scope` 判断标签是否选中
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">
|
||||
<span>自定义</span>
|
||||
<template slot="icon" slot-scope="props">
|
||||
<img :src="props.active ? icon.active : icon.normal" />
|
||||
</template>
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.active ? icon.active : icon.normal"
|
||||
>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">标签</van-tabbar-item>
|
||||
@ -55,8 +56,8 @@ export default {
|
||||
return {
|
||||
active: 0,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/1.png',
|
||||
active: '//img.yzcdn.cn/2.png'
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -91,6 +92,6 @@ export default {
|
||||
|
||||
### TabbarItem Slot
|
||||
|
||||
| Name | 描述 | Scope |
|
||||
| 名称 | 说明 | slot-scope |
|
||||
|-----------|-----------|-----------|
|
||||
| icon | 自定义icon | active |
|
||||
| icon | 自定义图标 | active: 是否为选中标签 |
|
||||
|
||||
@ -14,13 +14,45 @@ $van-checkbox-size: 20px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 12px;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
border: 1px solid #aaa;
|
||||
width: $van-checkbox-size;
|
||||
height: $van-checkbox-size;
|
||||
box-sizing: border-box;
|
||||
.van-icon {
|
||||
font-size: 12px;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
line-height: inherit;
|
||||
border: 1px solid #aaa;
|
||||
width: $van-checkbox-size;
|
||||
height: $van-checkbox-size;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&--round {
|
||||
.van-icon {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--checked {
|
||||
.van-icon {
|
||||
color: #fff;
|
||||
border-color: $green;
|
||||
background-color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-icon {
|
||||
color: $background-color;
|
||||
border-color: $border-color;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled&--checked {
|
||||
.van-icon {
|
||||
border-color: $border-color;
|
||||
background-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
@ -31,25 +63,4 @@ $van-checkbox-size: 20px;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&--checked {
|
||||
color: #fff;
|
||||
border-color: $green;
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: $background-color;
|
||||
border-color: $border-color;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&--disabled&--checked {
|
||||
border-color: $border-color;
|
||||
background-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user