You've already forked template-MP
Initial commit
This commit is contained in:
yuantao
100
uview-plus/components/u-radio-group/props.js
Normal file
100
uview-plus/components/u-radio-group/props.js
Normal file
@@ -0,0 +1,100 @@
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import defProps from '../../libs/config/props.js'
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// #ifdef VUE3
|
||||
// 绑定的值
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => defProps.radioGroup.value
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE2
|
||||
// 绑定的值
|
||||
value: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => defProps.radioGroup.value
|
||||
},
|
||||
// #endif
|
||||
// 是否禁用全部radio
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: () => defProps.radioGroup.disabled
|
||||
},
|
||||
// 形状，circle-圆形，square-方形
|
||||
shape: {
|
||||
type: String,
|
||||
default: () => defProps.radioGroup.shape
|
||||
},
|
||||
// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: () => defProps.radioGroup.activeColor
|
||||
},
|
||||
// 未选中的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: () => defProps.radioGroup.inactiveColor
|
||||
},
|
||||
// 标识符
|
||||
name: {
|
||||
type: String,
|
||||
default: () => defProps.radioGroup.name
|
||||
},
|
||||
// 整个组件的尺寸，默认px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.radioGroup.size
|
||||
},
|
||||
// 布局方式，row-横向，column-纵向
|
||||
placement: {
|
||||
type: String,
|
||||
default: () => defProps.radioGroup.placement
|
||||
},
|
||||
// label的文本
|
||||
label: {
|
||||
type: [String],
|
||||
default: () => defProps.radioGroup.label
|
||||
},
|
||||
// label的颜色 （默认 '#303133' ）
|
||||
labelColor: {
|
||||
type: [String],
|
||||
default: () => defProps.radioGroup.labelColor
|
||||
},
|
||||
// label的字体大小，px单位
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.radioGroup.labelSize
|
||||
},
|
||||
// 是否禁止点击文本操作checkbox(默认 false )
|
||||
labelDisabled: {
|
||||
type: Boolean,
|
||||
default: () => defProps.radioGroup.labelDisabled
|
||||
},
|
||||
// 图标颜色
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: () => defProps.radioGroup.iconColor
|
||||
},
|
||||
// 图标的大小，单位px
|
||||
iconSize: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.radioGroup.iconSize
|
||||
},
|
||||
// 竖向配列时，是否显示下划线
|
||||
borderBottom: {
|
||||
type: Boolean,
|
||||
default: () => defProps.radioGroup.borderBottom
|
||||
},
|
||||
// 图标与文字的对齐方式
|
||||
iconPlacement: {
|
||||
type: String,
|
||||
default: () => defProps.radio.iconPlacement
|
||||
},
|
||||
// item 之间的间距
|
||||
gap: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.radioGroup.gap
|
||||
}
|
||||
}
|
||||
})
|
||||
31
uview-plus/components/u-radio-group/radioGroup.js
Normal file
31
uview-plus/components/u-radio-group/radioGroup.js
Normal file
@@ -0,0 +1,31 @@
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 1.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : CPS
|
||||
* @lastTime : 2024-11-05 16:01:12
|
||||
* @FilePath : /u-view2.0/uview-ui/libs/config/props/radioGroup.js
|
||||
*/
|
||||
export default {
|
||||
// radio-group组件
|
||||
radioGroup: {
|
||||
value: '',
|
||||
disabled: false,
|
||||
shape: 'circle',
|
||||
activeColor: '#2979ff',
|
||||
inactiveColor: '#c8c9cc',
|
||||
name: '',
|
||||
size: 18,
|
||||
placement: 'row',
|
||||
label: '',
|
||||
labelColor: '#303133',
|
||||
labelSize: 14,
|
||||
labelDisabled: false,
|
||||
iconColor: '#ffffff',
|
||||
iconSize: 12,
|
||||
borderBottom: false,
|
||||
iconPlacement: 'left',
|
||||
gap: "10px"
|
||||
}
|
||||
}
|
||||
137
uview-plus/components/u-radio-group/u-radio-group.vue
Normal file
137
uview-plus/components/u-radio-group/u-radio-group.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-radio-group"
|
||||
:class="bemClass"
|
||||
:style="radioGroupStyle"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { props } from './props';
|
||||
import { mpMixin } from '../../libs/mixin/mpMixin';
|
||||
import { mixin } from '../../libs/mixin/mixin';
|
||||
import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
|
||||
|
||||
/**
|
||||
* 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} gap item 之间的间距
|
||||
* @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'])
|
||||
},
|
||||
radioGroupStyle() {
|
||||
const style = {
|
||||
gap: addUnit(this.gap)
|
||||
};
|
||||
return deepMerge(style, addStyle(this.customStyle));
|
||||
}
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user