alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[new feature] Radio: add shape prop & icon slot (#2651)

Browse Source
This commit is contained in:
neverland
2019-01-30 20:23:26 +08:00
committed by GitHub
parent 01c893abcb
commit 76e23aefc6
12 changed files with 294 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/radio/test/__snapshots__/demo.spec.js.snap
+36 -8
View File
@@ -4,20 +4,42 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="demo-radio-group van-radio-group">
<div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 1</span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 2</span></div>
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!----></i></div><span class="van-radio__label">单选框 1</span>
</div>
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!----></i></div><span class="van-radio__label">单选框 2</span>
</div>
</div>
</div>
<div>
<div class="demo-radio-group van-radio-group">
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 1</span></div>
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 2</span></div>
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
</div>
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
</div>
</div>
</div>
<div>
<div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:#07c160;font-size:undefined;"><!----></i></span><span class="van-radio__label">
<div class="demo-radio-group van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#07c160;background-color:#07c160;">
<!----></i></div><span class="van-radio__label">
单选框
</span></div>
</span>
</div>
</div>
<div>
<div class="demo-radio-group van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div><span class="van-radio__label">
自定义图标
</span>
</div>
</div>
<div>
<div class="van-radio-group">
@@ -25,13 +47,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单选框1</span></div>
<div class="van-cell__value">
<div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span></div>
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单选框2</span></div>
<div class="van-cell__value">
<div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span></div>
<div class="van-radio">
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!----></i></div>
</div>
</div>
</div>
</div>
packages/radio/test/index.spec.js
+45
View File
@@ -0,0 +1,45 @@
import Radio from '..';
import RadioGroup from '../../radio-group';
import { mount } from '../../../test/utils';
test('radio-group change', () => {
const wrapper = mount({
template: `
<radio-group v-model="result" @change="$emit('change', $event)">
<radio
v-for="item in list"
:key="item"
:name="item"
:disabled="item === 'd'"
>
label
</radio>
</radio-group>
`,
components: {
Radio,
RadioGroup
},
data() {
return {
result: 'a',
list: ['a', 'b', 'c', 'd']
};
}
});
const icons = wrapper.findAll('.van-radio__icon');
const labels = wrapper.findAll('.van-radio__label');
icons.at(2).trigger('click');
expect(wrapper.vm.result).toEqual('c');
expect(wrapper.emitted('change')[0][0]).toEqual('c');
labels.at(1).trigger('click');
expect(wrapper.vm.result).toEqual('b');
expect(wrapper.emitted('change')[1][0]).toEqual('b');
icons.at(3).trigger('click');
labels.at(3).trigger('click');
expect(wrapper.vm.result).toEqual('b');
});