blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-23 18:00:27 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] Checkbox: support custom icon (#1414)

Browse Source
This commit is contained in:
neverland 2018-07-05 21:25:04 +08:00 committed by GitHub
parent 0149dc0976
commit a0602c81d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 217 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/checkbox/demo/index.vue
View File

@ -9,8 +9,15 @@
<van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox> <van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('labelDisabled')"> <demo-block :title="$t('customIcon')">
<van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox> <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>
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
@ -54,14 +61,14 @@ export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
checkbox: '复选框', checkbox: '复选框',
labelDisabled: '禁用内容部分点击事件', customIcon: '自定义图标',
title3: 'Checkbox 组', title3: 'Checkbox 组',
title4: '设置最大可选数', title4: '设置最大可选数',
title5: '与 Cell 组件一起使用' title5: '与 Cell 组件一起使用'
}, },
'en-US': { 'en-US': {
checkbox: 'Checkbox', checkbox: 'Checkbox',
labelDisabled: 'Disable Label click event', customIcon: 'Custom Icon',
title3: 'Checkbox Group', title3: 'Checkbox Group',
title4: 'Maximum amount of checked options', title4: 'Maximum amount of checked options',
title5: 'Inside a Cell' title5: 'Inside a Cell'
@ -79,7 +86,11 @@ export default {
], ],
result: ['a', 'b'], result: ['a', 'b'],
result2: [], 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; margin: 0;
} }
} }
img {
width: 20px;
display: block;
}
} }
</style> </style>

31
packages/checkbox/en-US.md
View File

@ -31,10 +31,30 @@ export default {
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox> <van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
``` ```
#### Disable Label click event #### Custom Icon
Use icon slot to custom icon
```html ```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 #### Checkbox Group
@ -119,3 +139,10 @@ export default {
| Event | Description | Parameters | | Event | Description | Parameters |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | Triggered when value changed | current value | | change | Triggered when value changed | current value |
### Checkbox Slot
| Name | Description | slot-scope |
|-----------|-----------|-----------|
| default | Custom label | - |
| icon | Custom icon | checked: whether to be checked |

15
packages/checkbox/index.vue
View File

@ -1,15 +1,10 @@
<template> <template>
<div :class="b()"> <div :class="b()">
<icon <div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="onClick">
name="success" <slot name="icon" :checked="checked">
:class="[ <icon name="success" />
b('icon'), </slot>
`van-checkbox--${shape}`, { </div>
'van-checkbox--disabled': isDisabled,
'van-checkbox--checked': checked
}]"
@click="onClick"
/>
<span v-if="$slots.default" :class="b('label', labelPosition)" @click="onClick('label')"> <span v-if="$slots.default" :class="b('label', labelPosition)" @click="onClick('label')">
<slot /> <slot />
</span> </span>

74
packages/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -4,44 +4,58 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label">复选框</span></div> </i>
</div> <span class="van-checkbox__label">复选框</span></div>
</div> </div>
<div> <div>
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--disabled" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label">复选框</span></div> </i>
</div> <span class="van-checkbox__label">复选框</span></div>
<div class="van-checkbox"> <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;"> <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> <span class="van-checkbox__label">复选框</span></div> </i>
</div> <span class="van-checkbox__label">复选框</span></div>
</div> </div>
<div> <div>
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;"> <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">
</i> <span class="van-checkbox__label">复选框</span></div> </div> <span class="van-checkbox__label">
自定义图标
</span></div>
</div> </div>
<div> <div>
<div class="van-checkbox-group"> <div class="van-checkbox-group">
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label"> </i>
</div> <span class="van-checkbox__label">
复选框 a 复选框 a
</span></div> </span></div>
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label"> </i>
</div> <span class="van-checkbox__label">
复选框 b 复选框 b
</span></div> </span></div>
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label"> </i>
</div> <span class="van-checkbox__label">
复选框 c 复选框 c
</span></div> </span></div>
</div> </div>
@ -49,21 +63,27 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-checkbox-group"> <div class="van-checkbox-group">
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label"> </i>
</div> <span class="van-checkbox__label">
复选框 a 复选框 a
</span></div> </span></div>
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label"> </i>
</div> <span class="van-checkbox__label">
复选框 b 复选框 b
</span></div> </span></div>
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label"> </i>
</div> <span class="van-checkbox__label">
复选框 c 复选框 c
</span></div> </span></div>
</div> </div>
@ -78,9 +98,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> </i>
</div>
<!----> <!---->
</div> </div>
</div> </div>
@ -93,9 +115,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> </i>
</div>
<!----> <!---->
</div> </div>
</div> </div>
@ -108,9 +132,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> </i>
</div>
<!----> <!---->
</div> </div>
</div> </div>

31
packages/checkbox/zh-CN.md
View File

@ -32,10 +32,30 @@ export default {
<van-checkbox v-model="checked" disabled>复选框</van-checkbox> <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
``` ```
#### 禁用内容部分点击事件 #### 自定义图标
通过 icon slot 自定义图标，可以通过 `slot-scope` 判断是否为选中状态
```html ```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 组 #### Checkbox 组
@ -123,3 +143,10 @@ export default {
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 | | change | 当绑定值变化时触发的事件 | 当前组件的值 |
### Checkbox Slot
| 名称 | 说明 | slot-scope |
|-----------|-----------|-----------|
| default | 自定义文本 | - |
| icon | 自定义图标 | checked: 是否为选中状态 |

2
packages/submit-bar/demo/index.vue
View File

@ -89,7 +89,7 @@ export default {
} }
.van-edit-address { .van-edit-address {
color: #38F; color: #38f;
} }
.van-checkbox { .van-checkbox {

6
packages/submit-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -47,9 +47,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-submit-bar__bar"> <div class="van-submit-bar__bar">
<div class="van-checkbox"> <div class="van-checkbox">
<i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;"> <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;">
<!----> <!---->
</i> <span class="van-checkbox__label">全选</span></div> </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> <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"> <button class="van-button van-button--danger van-button--normal">
<!----><span class="van-button__text"> <!----><span class="van-button__text">

8
packages/tabbar/demo/index.vue
View File

@ -13,9 +13,11 @@
<van-tabbar v-model="active2"> <van-tabbar v-model="active2">
<van-tabbar-item icon="shop"> <van-tabbar-item icon="shop">
<span>{{ $t('custom') }}</span> <span>{{ $t('custom') }}</span>
<template slot="icon" slot-scope="props"> <img
<img :src="props.active ? icon.active : icon.normal" > slot="icon"
</template> slot-scope="props"
:src="props.active ? icon.active : icon.normal"
>
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>

14
packages/tabbar/en-US.md
View File

@ -37,9 +37,11 @@ Use `icon` slot to custom icon
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="shop"> <van-tabbar-item icon="shop">
<span>Custom</span> <span>Custom</span>
<template slot="icon" slot-scope="props"> <img
<img :src="props.active ? icon.active : icon.normal" /> slot="icon"
</template> slot-scope="props"
:src="props.active ? icon.active : icon.normal"
>
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="chat">Tab</van-tabbar-item> <van-tabbar-item icon="chat">Tab</van-tabbar-item>
<van-tabbar-item icon="records">Tab</van-tabbar-item> <van-tabbar-item icon="records">Tab</van-tabbar-item>
@ -52,8 +54,8 @@ export default {
return { return {
active: 0, active: 0,
icon: { icon: {
normal: '//img.yzcdn.cn/1.png', normal: '//img.yzcdn.cn/icon-normal.png',
active: '//img.yzcdn.cn/2.png' active: '//img.yzcdn.cn/icon-active.png'
} }
} }
} }
@ -87,6 +89,6 @@ export default {
### TabbarItem Slot ### TabbarItem Slot
| Name | Description | Scope | | Name | Description | slot-scope |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| icon | Custom icon | active | | icon | Custom icon | active |

19
packages/tabbar/zh-CN.md
View File

@ -33,16 +33,17 @@ export default {
#### 自定义图标 #### 自定义图标
通过 icon slot 自定义图标 通过 icon slot 自定义图标，可以通过 `slot-scope` 判断标签是否选中
```html ```html
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="shop"> <van-tabbar-item icon="shop">
<span>自定义</span> <span>自定义</span>
<template slot="icon" slot-scope="props"> <img
<img :src="props.active ? icon.active : icon.normal" /> slot="icon"
</template> slot-scope="props"
:src="props.active ? icon.active : icon.normal"
>
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="chat">标签</van-tabbar-item> <van-tabbar-item icon="chat">标签</van-tabbar-item>
<van-tabbar-item icon="records">标签</van-tabbar-item> <van-tabbar-item icon="records">标签</van-tabbar-item>
@ -55,8 +56,8 @@ export default {
return { return {
active: 0, active: 0,
icon: { icon: {
normal: '//img.yzcdn.cn/1.png', normal: '//img.yzcdn.cn/icon-normal.png',
active: '//img.yzcdn.cn/2.png' active: '//img.yzcdn.cn/icon-active.png'
} }
} }
} }
@ -91,6 +92,6 @@ export default {
### TabbarItem Slot ### TabbarItem Slot
| Name | 描述 | Scope | | 名称 | 说明 | slot-scope |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| icon | 自定义icon | active | | icon | 自定义图标 | active: 是否为选中标签 |

53
packages/vant-css/src/checkbox.css
View File

@ -14,15 +14,47 @@ $van-checkbox-size: 20px;
} }
&__icon { &__icon {
.van-icon {
font-size: 12px; font-size: 12px;
color: transparent; color: transparent;
text-align: center; text-align: center;
line-height: inherit;
border: 1px solid #aaa; border: 1px solid #aaa;
width: $van-checkbox-size; width: $van-checkbox-size;
height: $van-checkbox-size; height: $van-checkbox-size;
box-sizing: border-box; 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 { &__label {
margin-left: 10px; margin-left: 10px;
@ -31,25 +63,4 @@ $van-checkbox-size: 20px;
margin: 0 10px 0 0; 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;
}
} }