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

[improvement] Radio: jsx (#2617)

Browse Source
This commit is contained in:
neverland 2019-01-25 21:14:54 +08:00 committed by GitHub
parent 8e2b0f42fc
commit f8892d583d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/address-list/test/__snapshots__/demo.spec.js.snap
View File

@ -7,13 +7,13 @@ exports[`renders demo correctly 1`] = `
<div class="van-radio-group">
<div class="van-cell van-cell--clickable van-address-item">
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" 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"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
<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"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
</div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
<!----></i>
</div>
<div class="van-cell van-cell--clickable van-address-item">
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></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"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
</div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
<!----></i>
</div>
@ -21,7 +21,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
<div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div><div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></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"><div class="van-address-item__name">王五，1320000000</div><div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
</div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
<!----></i>
</div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>

2
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-radio-group">
<div class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></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"><div class="van-contact-list__name">张三，13000000000</div></span></div>
</div><i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
<!----></i>
</div>

77
packages/radio/index.js Normal file
View File

@ -0,0 +1,77 @@
import { use } from '../utils';
import Icon from '../icon';
import findParent from '../mixins/find-parent';
const [sfc, bem] = use('radio');
export default sfc({
mixins: [findParent],
props: {
name: null,
value: null,
disabled: Boolean,
checkedColor: String,
labelPosition: String,
labelDisabled: Boolean
},
computed: {
currentValue: {
get() {
return this.parent ? this.parent.value : this.value;
},
set(val) {
(this.parent || this).$emit('input', val);
}
},
isDisabled() {
return this.parent ? this.parent.disabled || this.disabled : this.disabled;
}
},
created() {
this.findParent('van-radio-group');
},
methods: {
onClickLabel() {
if (!this.isDisabled && !this.labelDisabled) {
this.currentValue = this.name;
}
}
},
render(h) {
const checked = this.currentValue === this.name;
const { isDisabled, checkedColor } = this;
const iconStyle = checkedColor && checked && !isDisabled && { color: checkedColor };
return (
<div
class={bem({ disabled: isDisabled })}
onClick={() => {
this.$emit('click');
}}
>
<span class={bem('input')}>
<input
vModel={this.currentValue}
type="radio"
class={bem('control')}
value={this.name}
disabled={isDisabled}
/>
<Icon style={iconStyle} name={checked ? 'checked' : 'circle'} />
</span>
{this.$slots.default && (
<span class={bem('label', this.labelPosition)} onClick={this.onClickLabel}>
{this.$slots.default}
</span>
)}
</div>
);
}
});

90
packages/radio/index.vue
View File

@ -1,90 +0,0 @@
<template>
<div
:class="b({ disabled: isDisabled })"
@click="$emit('click')"
>
<span :class="b('input')">
<input
v-model="currentValue"
type="radio"
:value="name"
:class="b('control')"
:disabled="isDisabled"
>
<icon
:style="iconStyle"
:name="checked ? 'checked' : 'circle'"
/>
</span>
<span
v-if="$slots.default"
:class="b('label', labelPosition)"
@click="onClickLabel"
>
<slot />
</span>
</div>
</template>
<script>
import create from '../utils/create';
import findParent from '../mixins/find-parent';
export default create({
name: 'radio',
mixins: [findParent],
props: {
name: null,
value: null,
disabled: Boolean,
checkedColor: String,
labelPosition: String,
labelDisabled: Boolean
},
computed: {
currentValue: {
get() {
return this.parent ? this.parent.value : this.value;
},
set(val) {
(this.parent || this).$emit('input', val);
}
},
checked() {
return this.currentValue === this.name;
},
isDisabled() {
return this.parent
? this.parent.disabled || this.disabled
: this.disabled;
},
iconStyle() {
const { checkedColor } = this;
if (checkedColor && this.checked && !this.isDisabled) {
return {
color: checkedColor
};
}
}
},
created() {
this.findParent('van-radio-group');
},
methods: {
onClickLabel() {
if (!this.isDisabled && !this.labelDisabled) {
this.currentValue = this.name;
}
}
}
});
</script>

18
packages/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -4,18 +4,18 @@ 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" value="1" 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" value="2" 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"><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>
</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" value="1" 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" value="2" 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 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>
</div>
<div>
<div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" value="1" 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"><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">
单选框
</span></div>
</div>
@ -25,17 +25,13 @@ 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" value="1" 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"><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>
</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" value="2" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></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></div>
</div>
</div>
</div>