You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.9 KiB
102 lines
2.9 KiB
3 years ago
|
<template>
|
||
|
|
<view class="s-radio" :class="c_class" :style="custom_style" @click="handleClick">
|
||
|
|
<slot :scopeParams="scopeParams" :checked="checked">
|
||
|
|
<slot name="icon" :scopeParams="scopeParams" :checked="checked">
|
||
|
|
<s-icon name="success" :size="iconSize" :custom-class="icon_class" :custom-style="icon_style" />
|
||
|
|
</slot>
|
||
|
|
<view v-if="$isDef(label) || labelSlot" class="s-radio__label" :style="label_style">
|
||
|
|
<slot name="label" :scopeParams="scopeParams" :checked="checked">{{ label }}</slot>
|
||
|
|
</view>
|
||
|
|
</slot>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import componentMixin from '../../mixins/componentMixin';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* s-radio 单选框
|
||
|
|
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配s-radio-group使用
|
||
|
|
* @property {*} name 标识符
|
||
|
|
* @property {*} label 描述文字
|
||
|
|
* @property {Boolean} disabled 是否禁用单选框
|
||
|
|
* @property {String} shape = [square] 形状
|
||
|
|
* @property {Number|String} iconSize 图标大小
|
||
|
|
* @property {String} checkedColor 单选框的选中状态颜色
|
||
|
|
* @property {String|Object} labelStyle 描述样式
|
||
|
|
* @property {Boolean} labelSlot 是否使用描述信息插槽
|
||
|
|
* @event {Function} click (event) 点击事件
|
||
|
|
* @example <s-radio :name="" label="单选框" />
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
name: 'SRadio',
|
||
|
|
mixins: [componentMixin],
|
||
|
|
props: {
|
||
|
|
name: {
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
disabled: Boolean,
|
||
|
|
shape: {
|
||
|
|
type: String,
|
||
|
|
default: 'round',
|
||
|
|
},
|
||
|
|
iconSize: [Number, String],
|
||
|
|
checkedColor: String,
|
||
|
|
labelStyle: [String, Object],
|
||
|
|
labelSlot: Boolean,
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
c_class() {
|
||
|
|
return this.$mergeClass({
|
||
|
|
's-radio--checked': this.checked,
|
||
|
|
's-radio--disabled': this.isDisabeld,
|
||
|
|
}, this.custom_class);
|
||
|
|
},
|
||
|
|
checked() {
|
||
|
|
return this.$sRadioGroup.value === this.name;
|
||
|
|
},
|
||
|
|
checked_color() {
|
||
|
|
return this.checkedColor || this.$sRadioGroup.checkedColor;
|
||
|
|
},
|
||
|
|
isDisabeld() {
|
||
|
|
return this.disabled || this.$sRadioGroup.disabled;
|
||
|
|
},
|
||
|
|
icon_class() {
|
||
|
|
return this.$mergeClass('s-radio__icon', {
|
||
|
|
[`s-radio__icon--${this.shape}`]: this.shape,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
icon_style() {
|
||
|
|
const style = {};
|
||
|
|
if (this.checked && this.checked_color) {
|
||
|
|
style.backgroundColor = this.checked_color;
|
||
|
|
style.borderColor = this.checked_color;
|
||
|
|
}
|
||
|
|
return this.$mergeStyle(style);
|
||
|
|
},
|
||
|
|
label_style() {
|
||
|
|
return this.$mergeStyle(this.labelStyle);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.$sRadioGroup = this.$getParentUntil('SRadioGroup');
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick(e) {
|
||
|
|
if (!this.isDisabeld) {
|
||
|
|
this.$emit('click', e);
|
||
|
|
if (!this.checked) {
|
||
|
|
this.$sRadioGroup.$emit('input', this.name);
|
||
|
|
this.$sRadioGroup.$emit('change', this.name);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" src="./index.scss"></style>
|