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

[bugfix] Checkbox: should not render label when label is empty (#920)

Browse Source
This commit is contained in:
neverland 2018-04-24 09:51:52 +08:00 committed by GitHub
parent 9d623a6196
commit 86184e090e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 63 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
docs/demos/views/checkbox.vue
View File

@ -1,17 +1,16 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <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>
<demo-block :title="$t('disabled')"> <demo-block :title="$t('disabled')">
<van-checkbox :value="false" disabled>{{ $t('checkbox') }} 2</van-checkbox> <van-checkbox :value="false" disabled>{{ $t('checkbox') }}</van-checkbox>
<van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox> <van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('labelDisabled')"> <demo-block :title="$t('labelDisabled')">
<van-checkbox v-model="checkbox3" label-disabled>{{ $t('checkbox') }} 2</van-checkbox> <van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
<van-checkbox v-model="checkbox4" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
@ -27,20 +26,22 @@
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="$t('title4')">
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result2" :max="2">
<van-cell-group> <van-checkbox
<van-cell v-for="(item, index) in list" :key="index"> v-for="(item, index) in list"
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox> :key="index"
</van-cell> :name="item"
</van-cell-group> >
{{ $t('checkbox') }} {{ item }}
</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
</demo-block> </demo-block>
<demo-block :title="$t('title5')"> <demo-block :title="$t('title5')">
<van-checkbox-group v-model="result2" :max="max"> <van-checkbox-group v-model="result3">
<van-cell-group> <van-cell-group>
<van-cell v-for="(item, index) in list" :key="index"> <van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox> <van-checkbox :name="item" />
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>
@ -53,17 +54,17 @@ export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
checkbox: '复选框', checkbox: '复选框',
labelDisabled: '禁用 Checkbox 内容部分点击事件', labelDisabled: '禁用内容部分点击事件',
title3: 'Checkbox 组', title3: 'Checkbox 组',
title4: '与 Cell 组件一起使用', title4: '设置最大可选数',
title5: '设置最大可选数', title5: '与 Cell 组件一起使用'
}, },
'en-US': { 'en-US': {
checkbox: 'Checkbox', checkbox: 'Checkbox',
labelDisabled: 'Disable Checkbox Label click event', labelDisabled: 'Disable Label click event',
title3: 'Checkbox Group', title3: 'Checkbox Group',
title4: 'Inside a Cell', title4: 'Maximum amount of checked options',
title5: 'Maximum amount of checked options' title5: 'Inside a Cell'
} }
}, },
@ -71,8 +72,6 @@ export default {
return { return {
checkbox1: true, checkbox1: true,
checkbox2: true, checkbox2: true,
checkbox3: false,
checkbox4: true,
list: [ list: [
'a', 'a',
'b', 'b',
@ -80,7 +79,7 @@ export default {
], ],
result: ['a', 'b'], result: ['a', 'b'],
result2: [], result2: [],
max: 2 result3: []
}; };
} }
}; };
@ -95,13 +94,6 @@ export default {
.van-cell { .van-cell {
.van-checkbox { .van-checkbox {
margin: 0; margin: 0;
display: flex;
flex-direction: row-reverse;
&__label {
margin: 0;
flex: 1;
}
} }
} }
} }

19
docs/demos/views/radio.vue
View File

@ -17,8 +17,12 @@
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
<van-radio-group v-model="radio3"> <van-radio-group v-model="radio3">
<van-cell-group> <van-cell-group>
<van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell> <van-cell :title="$t('radio') + 1" clickable @click="radio3 = '1'">
<van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell> <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-cell-group>
</van-radio-group> </van-radio-group>
</demo-block> </demo-block>
@ -61,16 +65,5 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.van-cell {
.van-radio__input {
float: right;
position: static;
}
.van-radio__label {
margin: 0;
}
}
} }
</style> </style>

14
docs/markdown/en-US/checkbox.md
View File

@ -12,7 +12,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
#### Basic Usage #### Basic Usage
```html ```html
<van-checkbox v-model="checked">Checkbox 1</van-checkbox> <van-checkbox v-model="checked">Checkbox</van-checkbox>
``` ```
```javascript ```javascript
@ -28,7 +28,13 @@ export default {
#### Disabled #### Disabled
```html ```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 #### Checkbox Group
@ -76,8 +82,8 @@ export default {
```html ```html
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
<van-cell-group> <van-cell-group>
<van-cell v-for="(item, index) in list" :key="item"> <van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox> <van-checkbox :name="item" />
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>

8
docs/markdown/en-US/radio.md
View File

@ -44,8 +44,12 @@ export default {
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="radio">
<van-cell-group> <van-cell-group>
<van-cell><van-radio name="1">Radio 1</van-radio></van-cell> <van-cell :title="Radio 1" clickable @click="radio = '1'">
<van-cell><van-radio name="2">Radio 2</van-radio></van-cell> <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-cell-group>
</van-radio-group> </van-radio-group>
``` ```

12
docs/markdown/zh-CN/checkbox.md
View File

@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
通过`v-model`绑定 checkbox 的勾选状态 通过`v-model`绑定 checkbox 的勾选状态
```html ```html
<van-checkbox v-model="checked">复选框 1</van-checkbox> <van-checkbox v-model="checked">复选框</van-checkbox>
``` ```
```javascript ```javascript
@ -29,13 +29,15 @@ export default {
#### 禁用状态 #### 禁用状态
```html ```html
<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox> <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
``` ```
#### 禁用内容部分点击事件 #### 禁用内容部分点击事件
```html ```html
<van-checkbox v-model="checked" label-disabled>复选框 3</van-checkbox> <van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
``` ```
#### Checkbox 组 #### Checkbox 组
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值 需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
@ -84,8 +86,8 @@ export default {
```html ```html
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
<van-cell-group> <van-cell-group>
<van-cell v-for="(item, index) in list" :key="item"> <van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
<van-checkbox :name="item">复选框 {{ item }}</van-checkbox> <van-checkbox :name="item" />
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>

8
docs/markdown/zh-CN/radio.md
View File

@ -46,8 +46,12 @@ export default {
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="radio">
<van-cell-group> <van-cell-group>
<van-cell><van-radio name="1">单选框 1</van-radio></van-cell> <van-cell :title="单选框 1" clickable @click="radio = '1'">
<van-cell><van-radio name="2">单选框 2</van-radio></van-cell> <van-radio name="1" />
</van-cell>
<van-cell :title="单选框 2" clickable @click="radio = '2'">
<van-radio name="2" />
</van-cell>
</van-cell-group> </van-cell-group>
</van-radio-group> </van-radio-group>
``` ```

2
packages/checkbox/index.vue
View File

@ -10,7 +10,7 @@
}]" }]"
@click="onClick" @click="onClick"
/> />
<span class="van-checkbox__label" @click="onClick('label')"> <span v-if="$slots.default" class="van-checkbox__label" @click="onClick('label')">
<slot /> <slot />
</span> </span>
</div> </div>

2
packages/radio/index.vue
View File

@ -14,7 +14,7 @@
> >
<icon :name="currentValue === name ? 'checked' : 'check'" /> <icon :name="currentValue === name ? 'checked' : 'check'" />
</span> </span>
<span class="van-radio__label" @click="onClickLabel"> <span v-if="$slots.default" class="van-radio__label" @click="onClickLabel">
<slot /> <slot />
</span> </span>
</div> </div>

6
test/specs/checkbox.spec.js
View File

@ -165,7 +165,7 @@ describe('Checkbox', () => {
expect(wrapper.hasClass('van-checkbox')).to.be.true; expect(wrapper.hasClass('van-checkbox')).to.be.true;
const eventStub = sinon.stub(wrapper.vm, '$emit'); 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'); checkboxLabel.trigger('click');
wrapper.update(); wrapper.update();
@ -189,7 +189,7 @@ describe('Checkbox', () => {
expect(wrapper.vm.currentValue).to.be.false; expect(wrapper.vm.currentValue).to.be.false;
expect(wrapper.vm.isDisabled).to.be.true; 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'); checkboxLabel.trigger('click');
expect(wrapper.vm.currentValue).to.be.false; expect(wrapper.vm.currentValue).to.be.false;
@ -206,7 +206,7 @@ describe('Checkbox', () => {
expect(wrapper.hasClass('van-checkbox')).to.be.true; expect(wrapper.hasClass('van-checkbox')).to.be.true;
expect(wrapper.vm.currentValue).to.be.false; 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'); checkboxLabel.trigger('click');
expect(wrapper.vm.currentValue).to.be.false; expect(wrapper.vm.currentValue).to.be.false;

26
test/specs/radio.spec.js
View File

@ -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', () => { it('click on a disabled radio', () => {
wrapper = mount(Radio, { wrapper = mount(Radio, {
propsData: { propsData: {
@ -131,8 +108,7 @@ describe('Radio', () => {
expect(wrapper.instance().currentValue).to.equal('1'); expect(wrapper.instance().currentValue).to.equal('1');
expect(wrapper.instance().isDisabled).to.be.true; expect(wrapper.instance().isDisabled).to.be.true;
const checkboxLabel = wrapper.find('.van-radio__label')[0]; wrapper.trigger('click');
checkboxLabel.trigger('click');
expect(wrapper.instance().currentValue).to.equal('1'); expect(wrapper.instance().currentValue).to.equal('1');
}); });