blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-05-21 22:09:16 +08:00
Code Issues Projects Releases Wiki Activity

feat(Checkbox): add icon-size prop (#1989)

Browse Source
This commit is contained in:
lethe 2019-09-10 10:11:53 +08:00 committed by neverland
parent a967862b1d
commit 8eeb74c3a7
4 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/checkbox/README.md
View File

@ -201,6 +201,7 @@ Page({
| label-position | 文本位置，可选值为 `left` | *string* | `right` | - | | label-position | 文本位置，可选值为 `left` | *string* | `right` | - |
| use-icon-slot | 是否使用 icon slot | *boolean* | `false` | - | | use-icon-slot | 是否使用 icon slot | *boolean* | `false` | - |
| checked-color | 选中状态颜色 | *string* | `#1989fa` | - | | checked-color | 选中状态颜色 | *string* | `#1989fa` | - |
| icon-size | icon 大小 | *string \| number* | `20px` |
### CheckboxGroup API ### CheckboxGroup API

6
packages/checkbox/index.less
View File

@ -17,10 +17,10 @@
&__icon { &__icon {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
width: @checkbox-size; width: 1em;
height: @checkbox-size; height: 1em;
color: transparent; color: transparent;
font-size: 14px; font-size: @checkbox-size;
text-align: center; text-align: center;
border: 1px solid @checkbox-border-color; border: 1px solid @checkbox-border-color;
transition-duration: @checkbox-transition-duration; transition-duration: @checkbox-transition-duration;

17
packages/checkbox/index.ts
View File

@ -1,4 +1,5 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { addUnit } from '../common/utils';
function emit(target: WechatMiniprogram.Component.TrivialInstance, value: boolean | any[]) { function emit(target: WechatMiniprogram.Component.TrivialInstance, value: boolean | any[]) {
target.$emit('input', value); target.$emit('input', value);
@ -31,9 +32,17 @@ VantComponent({
shape: { shape: {
type: String, type: String,
value: 'round' value: 'round'
},
iconSize: {
type: null,
observer: 'setSizeWithUnit'
} }
}, },
data: {
sizeWithUnit: '20px'
},
methods: { methods: {
emitChange(value: boolean) { emitChange(value: boolean) {
if (this.parent) { if (this.parent) {
@ -78,6 +87,12 @@ VantComponent({
emit(parent, parentValue); emit(parent, parentValue);
} }
} }
} },
setSizeWithUnit(size: string | number): void {
this.set({
sizeWithUnit: addUnit(size)
});
},
} }
}); });

5
packages/checkbox/index.wxml
View File

@ -6,10 +6,11 @@
<van-icon <van-icon
wx:else wx:else
name="success" name="success"
size="0.8em"
class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}" class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}" style="font-size: {{ sizeWithUnit }};{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
custom-class="icon-class" custom-class="icon-class"
custom-style="line-height: 20px;" custom-style="line-height: 1.25em;"
/> />
</view> </view>
<view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel"> <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">