/**
|
* CSwitchRadio 开关式单选框
|
* @author Tevin
|
*/
|
|
<template>
|
<view
|
class="c-switch c-switch-radio"
|
:class="className"
|
>
|
<AtSwitch
|
:title="itemRes.label"
|
ref="switch"
|
/>
|
<view
|
class="c-switch-radio-group"
|
ref="radio"
|
>
|
<view
|
class="c-switch-radio-item"
|
@tap="evt => handleChange(true)"
|
>
|
<view
|
class="c-switch-radio-icon"
|
:class="current === true ? 'checked' : ''"
|
>
|
<AtIcon value="check" />
|
</view>
|
<view class="c-switch-radio-label">{{checkedLabel}}</view>
|
</view>
|
<view
|
class="c-switch-radio-item"
|
@tap="evt => handleChange(false)"
|
>
|
<view
|
class="c-switch-radio-icon"
|
:class="current === false ? 'checked' : ''"
|
>
|
<AtIcon value="check" />
|
</view>
|
<view class="c-switch-radio-label">{{uncheckedLabel}}</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { AtSwitch, AtIcon } from 'taro-ui-vue';
|
import { $ } from '@tarojs/extend';
|
import './cSwitch.scss';
|
|
export default {
|
name: 'CSwitchRadio',
|
components: {
|
AtSwitch,
|
AtIcon,
|
},
|
props: {
|
// 表单数据资源（表单组件内部机制专用）
|
itemRes: Object,
|
// 选项对齐方式，left / right(默认)
|
checkAlign: {
|
type: String,
|
default: 'right',
|
},
|
// 选中文字
|
checkedLabel: {
|
type: String,
|
default: '是',
|
},
|
// 不选中文字
|
uncheckedLabel: {
|
type: String,
|
default: '否',
|
},
|
},
|
data() {
|
return {};
|
},
|
computed: {
|
className() {
|
let className = '';
|
if (this.checkAlign === 'left') {
|
className += 'c-switch-radio-left ';
|
}
|
if (this.itemRes.required) {
|
className += 'c-switch-required ';
|
}
|
if (this.itemRes.error) {
|
className += 'c-switch-error ';
|
}
|
return className;
|
},
|
current() {
|
return this.itemRes.formData[this.itemRes.name];
|
},
|
},
|
methods: {
|
handleChange(value) {
|
this.itemRes.onChange(value);
|
},
|
},
|
mounted() {
|
if (process.env.TARO_ENV === 'h5') {
|
$(this.$refs.switch.$el).append(this.$refs.radio.$el);
|
} else if (process.env.TARO_ENV === 'weapp') {
|
$(this.$refs.switch.$el).find('.at-switch').append(this.$refs.radio);
|
}
|
},
|
};
|
</script>
|
