mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[bugfix] Checkbox: should not render label when label is empty (#920)
This commit is contained in:
neverland
GitHub
parent
9d623a6196
commit
86184e090e
@ -1,17 +1,16 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
|
||||
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-checkbox :value="false" disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
<van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
<van-checkbox :value="false" disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
<van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('labelDisabled')">
|
||||
<van-checkbox v-model="checkbox3" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
<van-checkbox v-model="checkbox4" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
<van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
@ -27,20 +26,22 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<van-checkbox-group v-model="result2" :max="2">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
{{ $t('checkbox') }} {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-checkbox-group v-model="result2" :max="max">
|
||||
<van-checkbox-group v-model="result3">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
|
||||
<van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@ -53,17 +54,17 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
checkbox: '复选框',
|
||||
labelDisabled: '禁用 Checkbox 内容部分点击事件',
|
||||
labelDisabled: '禁用内容部分点击事件',
|
||||
title3: 'Checkbox 组',
|
||||
title4: '与 Cell 组件一起使用',
|
||||
title5: '设置最大可选数',
|
||||
title4: '设置最大可选数',
|
||||
title5: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
labelDisabled: 'Disable Checkbox Label click event',
|
||||
labelDisabled: 'Disable Label click event',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Inside a Cell',
|
||||
title5: 'Maximum amount of checked options'
|
||||
title4: 'Maximum amount of checked options',
|
||||
title5: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
@ -71,8 +72,6 @@ export default {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
checkbox3: false,
|
||||
checkbox4: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
@ -80,7 +79,7 @@ export default {
|
||||
],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
max: 2
|
||||
result3: []
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -95,13 +94,6 @@ export default {
|
||||
.van-cell {
|
||||
.van-checkbox {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
&__label {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,8 +17,12 @@
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
|
||||
<van-cell :title="$t('radio') + 1" clickable @click="radio3 = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="$t('radio') + 2" clickable @click="radio3 = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
@ -61,16 +65,5 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
.van-radio__input {
|
||||
float: right;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.van-radio__label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
|
||||
<van-checkbox v-model="checked">Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -28,7 +28,13 @@ export default {
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
|
||||
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Disable Label click event
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Checkbox Group
|
||||
@ -76,8 +82,8 @@ export default {
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="item">
|
||||
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
|
||||
<van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
@ -44,8 +44,12 @@ export default {
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
|
||||
<van-cell :title="Radio 1" clickable @click="radio = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="Radio 2" clickable @click="radio = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
|
||||
通过`v-model`绑定 checkbox 的勾选状态
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">复选框 1</van-checkbox>
|
||||
<van-checkbox v-model="checked">复选框</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -29,13 +29,15 @@ export default {
|
||||
#### 禁用状态
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### 禁用内容部分点击事件
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>复选框 3</van-checkbox>
|
||||
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### Checkbox 组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
@ -84,8 +86,8 @@ export default {
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="item">
|
||||
<van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
|
||||
<van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
@ -46,8 +46,12 @@ export default {
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">单选框 1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">单选框 2</van-radio></van-cell>
|
||||
<van-cell :title="单选框 1" clickable @click="radio = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="单选框 2" clickable @click="radio = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
}]"
|
||||
@click="onClick"
|
||||
/>
|
||||
<span class="van-checkbox__label" @click="onClick('label')">
|
||||
<span v-if="$slots.default" class="van-checkbox__label" @click="onClick('label')">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
>
|
||||
<icon :name="currentValue === name ? 'checked' : 'check'" />
|
||||
</span>
|
||||
<span class="van-radio__label" @click="onClickLabel">
|
||||
<span v-if="$slots.default" class="van-radio__label" @click="onClickLabel">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -165,7 +165,7 @@ describe('Checkbox', () => {
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
|
||||
wrapper.update();
|
||||
@ -189,7 +189,7 @@ describe('Checkbox', () => {
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
expect(wrapper.vm.isDisabled).to.be.true;
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
@ -206,7 +206,7 @@ describe('Checkbox', () => {
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
|
||||
@ -94,29 +94,6 @@ describe('Radio', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('click on a radio label', (done) => {
|
||||
wrapper = mount(Radio, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
name: '1',
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-radio')).to.be.true;
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-radio__label')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on a disabled radio', () => {
|
||||
wrapper = mount(Radio, {
|
||||
propsData: {
|
||||
@ -131,8 +108,7 @@ describe('Radio', () => {
|
||||
expect(wrapper.instance().currentValue).to.equal('1');
|
||||
expect(wrapper.instance().isDisabled).to.be.true;
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-radio__label')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
wrapper.trigger('click');
|
||||
|
||||
expect(wrapper.instance().currentValue).to.equal('1');
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user