gree_leran/node_modules/uview-plus/components/u-radio-group/u-radio-group.vue

129 lines
4.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
class="u-radio-group"
:class="bemClass"
>
<slot></slot>
</view>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
/**
* radioRroup 单选框父组件
* @description 单选框用于有一个选择用户只能选择其中一个的场景。搭配u-radio使用
* @tutorial https://ijry.github.io/uview-plus/components/radio.html
* @property {String | Number | Boolean} value 绑定的值
* @property {Boolean} disabled 是否禁用所有radio默认 false
* @property {String} shape 外观形状shape-方形circle-圆形(默认 circle )
* @property {String} activeColor 选中时的颜色应用到所有子Radio组件默认 '#2979ff'
* @property {String} inactiveColor 未选中的颜色 (默认 '#c8c9cc' )
* @property {String} name 标识符
* @property {String | Number} size 组件整体的大小单位px默认 18
* @property {String} placement 布局方式row-横向column-纵向 (默认 'row'
* @property {String} label 文本
* @property {String} labelColor label的颜色 (默认 '#303133'
* @property {String | Number} labelSize label的字体大小px单位 (默认 14
* @property {Boolean} labelDisabled 是否禁止点击文本操作checkbox(默认 false )
* @property {String} iconColor 图标颜色 (默认 '#ffffff'
* @property {String | Number} iconSize 图标的大小单位px (默认 12
* @property {Boolean} borderBottom placement为row时是否显示下边框 (默认 false
* @property {String} iconPlacement 图标与文字的对齐方式 (默认 'left'
* @property {Object} customStyle 组件的样式,对象形式
* @event {Function} change 任一个radio状态发生变化时触发
* @example <u-radio-group v-model="value"></u-radio-group>
*/
export default {
name: 'u-radio-group',
mixins: [mpMixin, mixin, props],
computed: {
// 这里computed的变量都是子组件u-radio需要用到的由于头条小程序的兼容性差异子组件无法实时监听父组件参数的变化
// 所以需要手动通知子组件这里返回一个parentData变量供watch监听在其中去通知每一个子组件重新从父组件(u-radio-group)
// 拉取父组件新的变化后的参数
parentData() {
// #ifdef VUE3
return [this.modelValue, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
this.iconSize, this.borderBottom, this.placement
]
// #endif
// #ifdef VUE2
return [this.value, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
this.iconSize, this.borderBottom, this.placement
]
// #endif
},
bemClass() {
// this.bem为一个computed变量在mixin中
return this.bem('radio-group', ['placement'])
},
},
watch: {
// 当父组件需要子组件需要共享的参数发生了变化,手动通知子组件
parentData() {
if (this.children.length) {
this.children.map(child => {
// 判断子组件(u-radio)如果有init方法的话就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
typeof(child.init) === 'function' && child.init()
})
}
},
},
data() {
return {
}
},
created() {
this.children = []
},
// #ifdef VUE3
emits: ['update:modelValue', 'change'],
// #endif
methods: {
// 将其他的radio设置为未选中的状态
unCheckedOther(childInstance) {
this.children.map(child => {
// 所有子radio中被操作组件实例的checked的值无需修改
if (childInstance !== child) {
child.checked = false
}
})
const {
name
} = childInstance
// 通过emit事件设置父组件通过v-model双向绑定的值
// #ifdef VUE3
this.$emit("update:modelValue", name);
// #endif
// #ifdef VUE2
this.$emit("input", name);
// #endif
// 发出事件
this.$emit('change', name)
},
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-radio-group {
flex: 1;
&--row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-flow: row wrap;
}
&--column {
@include flex(column);
}
}
</style>