dsl-radio.vue 文件代码
<template>
<view
class="dsl-radio cursor-pointer"
@tap.stop="wrapperClickHandler"
:style="[radioStyle]"
:class="[
`dsl-radio-label--${parentData.iconPlacement}`,
parentData.borderBottom && parentData.placement === 'column' && 'dsl-border-bottom'
]">
<view
class="dsl-radio__icon-wrap cursor-pointer"
@tap.stop="iconClickHandler"
:class="iconClasses"
:style="[iconWrapStyle]">
<!-- <slot name="icon" :elIconSize="elIconSize" :elIconColor="elIconColor"> -->
<dsl-icon
class="dsl-radio__icon-wrap__icon"
name="check-white"
:size="elIconSize"
:color="elIconColor" />
<!-- </slot> -->
</view>
<view
class="dsl-radio__label-wrap cursor-pointer"
@tap.stop="labelClickHandler">
<slot
name="label"
:label="label"
:elDisabled="elDisabled">
<text
class="dsl-radio__text"
:style="{
color: elDisabled ? elInactiveColor : elLabelColor,
fontSize: elLabelSize,
lineHeight: elLabelSize
}"
>{{ label }}</text
>
</slot>
</view>
</view>
</template>
<script>
import { props } from './props'
import { addUnit, addStyle, deepMerge } from '../../libs/function/index'
/**
* radio 单选框
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配dsl-radio-group使用
* @property {String | Number} name radio的名称
* @property {Boolean} disabled 是否禁用
* @property {String | Boolean} labelDisabled 是否禁止点击提示语选中单选框
* @property {String} activeColor 选中时的颜色，如设置parent的active-color将失效
* @property {String} inactiveColor 未选中的颜色
* @property {String | Number} iconSize 图标大小，单位px
* @property {String | Number} labelSize label字体大小，单位px
* @property {String | Number} label label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
* @property {String | Number} size 整体的大小
* @property {String} iconColor 图标颜色
* @property {String} labelColor label的颜色
* @property {Object} customStyle 组件的样式，对象形式
*
* @event {Function} change 某个radio状态发生变化时触发(选中状态)
* @example <dsl-radio :labelDisabled="false">门掩黄昏，无计留春住</dsl-radio>
*/
export default {
name: 'dsl-radio',
mixins: [props],
data() {
return {
checked: false,
// 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
// 故只能使用如此方法
parentData: {
iconSize: 24,
labelDisabled: null,
disabled: null,
// shape: null,
activeColor: null,
inactiveColor: null,
size: 20,
value: null,
modelValue: null,
iconColor: null,
placement: 'row',
borderBottom: false,
iconPlacement: 'left'
}
}
},
computed: {
// 是否禁用，如果父组件dsl-raios-group禁用的话，将会忽略子组件的配置
elDisabled() {
return this.disabled !== ''
? this.disabled
: this.parentData.disabled !== null
? this.parentData.disabled
: false
},
// 是否禁用label点击
elLabelDisabled() {
return this.labelDisabled !== ''
? this.labelDisabled
: this.parentData.labelDisabled !== null
? this.parentData.labelDisabled
: false
},
// 组件尺寸，对应size的值，默认值为20px
elSize() {
return this.size ? this.size : this.parentData.size ? this.parentData.size : 20
},
// 组件的勾选图标的尺寸，默认24px
elIconSize() {
return this.iconSize ? this.iconSize : this.parentData.iconSize ? this.parentData.iconSize : 24
},
// 组件选中激活时的颜色
elActiveColor() {
return this.activeColor
? this.activeColor
: this.parentData.activeColor
? this.parentData.activeColor
: '#14C780'
},
// 组件禁选未选中文案颜色
elInactiveColor() {
return this.inactiveColor
? this.inactiveColor
: this.parentData.inactiveColor
? this.parentData.inactiveColor
: '#B5B8C0'
},
// label的颜色
elLabelColor() {
return this.labelColor ? this.labelColor : this.parentData.labelColor ? this.parentData.labelColor : '#34373D'
},
// 组件的形状
// elShape() {
// return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle')
// },
// label大小
elLabelSize() {
return addUnit(this.labelSize ? this.labelSize : this.parentData.labelSize ? this.parentData.labelSize : '16')
},
elIconColor() {
const iconColor = this.iconColor
? this.iconColor
: this.parentData.iconColor
? this.parentData.iconColor
: '#ffffff'
// 图标的颜色
// if (this.elDisabled) {
// disabled状态下，已勾选的radio图标改为elInactiveColor
return this.checked ? iconColor : 'transparent'
// } else {
// return this.checked ? iconColor : 'transparent'
// }
},
iconClasses() {
let classes = []
// 组件的形状
// classes.push('u-radio__icon-wrap--' + this.elShape)
classes.push('dsl-radio__icon-wrap--circle')
if (this.elDisabled) {
classes.push('dsl-radio__icon-wrap--disabled')
}
if (this.checked) {
classes.push('dsl-radio__icon-wrap--checked')
}
if (this.checked && this.elDisabled) {
classes.push('dsl-radio__icon-wrap--disabled--checked')
}
// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
// #ifdef MP-ALIPAY || MP-TOUTIAO
classes = classes.join(' ')
// #endif
return classes
},
iconWrapStyle() {
// radio的整体样式
const style = {}
// style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff'
style.width = addUnit(this.elSize)
style.height = addUnit(this.elSize)
// 如果是图标在右边的话，移除它的右边距
if (this.parentData.iconPlacement === 'right') {
style.marginRight = 0
}
return style
},
radioStyle() {
const style = {}
// if(this.parentData.borderBottom && this.parentData.placement === 'row') {
// console.error('检测到您将borderBottom设置为true，需要同时将dsl-radio-group的placement设置为column才有效')
// }
// 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
// if(this.parentData.borderBottom && this.parentData.placement === 'column') {
// // ios像素密度高，需要多一点的距离
// style.paddingBottom = uni.$u.os() === 'ios' ? '12px' : '8px'
// }
return deepMerge(style, addStyle(this.customStyle))
}
},
mounted() {
this.init()
},
emits: ['change'],
methods: {
init() {
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
this.updateParentData()
// if (!this.parent) {
// console.error('dsl-radio必须搭配dsl-radio-group组件使用')
// }
// 设置初始化时，是否默认选中的状态
// #ifdef VUE3
this.checked = this.name === this.parentData.modelValue
// #endif
// #ifdef VUE2
this.checked = this.name === this.parentData.value
// #endif
},
updateParentData() {
this.getParentData('dsl-radio-group')
},
// 点击图标
iconClickHandler(e) {
this.preventEvent(e)
// 如果整体被禁用，不允许被点击
if (!this.elDisabled) {
this.setRadioCheckedStatus()
}
},
// 横向两端排列时，点击组件即可触发选中事件
wrapperClickHandler(e) {
this.parentData.iconPlacement === 'right' && this.iconClickHandler(e)
},
// 点击label
labelClickHandler(e) {
this.preventEvent(e)
// 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
if (!this.elLabelDisabled && !this.elDisabled) {
this.setRadioCheckedStatus()
}
},
emitEvent() {
// dsl-radio的checked不为true时(意味着未选中)，才发出事件，避免多次点击触发事件
if (!this.checked) {
this.$emit('change', this.name)
// 尝试调用dsl-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
// this.$nextTick(() => {
// uni.$u.formValidate(this, 'change')
// })
}
},
// 改变组件选中状态
// 这里的改变的依据是，更改本组件的checked值为true，同时通过父组件遍历所有dsl-radio实例
// 将本组件外的其他dsl-radio的checked都设置为false(都被取消选中状态)，因而只剩下一个为选中状态
setRadioCheckedStatus() {
this.emitEvent()
// 将本组件标记为选中状态
this.checked = true
typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this)
}
}
}
</script>
<style lang="scss" scoped>
@import '../../libs/css/components.scss';
.dsl-radio {
/* #ifndef APP-NVUE */
@include flex(row);
/* #endif */
overflow: hidden;
flex-direction: row;
align-items: center !important;
margin-bottom: 5px;
margin-top: 5px;
&-label--left {
flex-direction: row;
}
&-label--right {
flex-direction: row-reverse;
justify-content: space-between;
}
&__icon-wrap {
/* #ifndef APP-NVUE */
box-sizing: border-box;
// nvue下，border-color过渡有问题
transition-property: border-color, background-color, color;
transition-duration: 0.2s;
/* #endif */
@include flex;
align-items: center;
justify-content: center;
color: transparent;
text-align: center;
margin-right: $dsl-radio-wrap-margin-right;
// font-size: $dsl-radio-wrap-font-size;
border-width: $dsl-radio-wrap-border-width;
border-color: $dsl-radio-wrap-border-color;
border-style: solid;
// padding-top: 1.5px;
/* #ifdef MP-TOUTIAO */
// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
// &__icon {
// line-height: $dsl-radio-line-height;
// }
/* #endif */
&--circle {
border-radius: $dsl-radio-circle-border-radius;
}
// &--square {
// border-radius: $dsl-radio-square-border-radius;
// }
&--checked {
color: $dsl-radio-checked-color;
background-color: $dsl-radio-checked-background-color;
border-color: $dsl-radio-checked-border-color;
}
&--disabled {
background-color: $dsl-radio-disabled-background-color !important;
border-color: $dsl-radio-disabled-border-color;
}
&--disabled--checked {
color: $dsl-radio-disabled--checked-color !important;
background-color: $dsl-radio-disabled--checked-color !important;
border-color: $dsl-radio-disabled--checked-color !important;
}
}
&__label {
/* #ifndef APP-NVUE */
word-wrap: break-word;
/* #endif */
margin-left: $dsl-radio-label-margin-left;
margin-right: $dsl-radio-label-margin-right;
color: $dsl-radio-label-color;
// font-size: $dsl-radio-label-font-size;
&--disabled {
color: $dsl-radio-label-disabled-color;
}
}
&__label-wrap{
display: flex;
align-items: center; /* 确保文字垂直居中 */
height: 100%; /* 继承父容器高度 */
/* 修复文字在安卓偏上的问题 */
position: relative;
top: 0;
}
&__text {
/* 移除行高设置，使用flex居中 */
line-height: normal !important;
/* 确保文字垂直居中 */
display: flex;
align-items: center;
}
}
/* #ifdef IOS */
.dsl-radio {
padding: 10px 0; /* iOS需要更多垂直空间 */
&__icon-wrap {
transform: translateY(0.5px); /* 微调图标垂直位置 */
}
}
/* #endif */
</style>
props.js 文件代码
// import { defineMixin } from '../../libs/vue'
import defProps from './radio.js'
export const props = ({
props: {
// radio的名称
name: {
type: [String, Number, Boolean],
default: () => defProps.radio.name
},
// 是否禁用
disabled: {
type: [String, Boolean],
default: () => defProps.radio.disabled
},
// 是否禁止点击提示语选中单选框
labelDisabled: {
type: [String, Boolean],
default: () => defProps.radio.labelDisabled
},
// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
activeColor: {
type: String,
default: () => defProps.radio.activeColor
},
// 未选中的颜色
inactiveColor: {
type: String,
default: () => defProps.radio.inactiveColor
},
// 图标的大小，单位px
iconSize: {
type: [String, Number],
default: () => defProps.radio.iconSize
},
// label的字体大小，px单位
labelSize: {
type: [String, Number],
default: () => defProps.radio.labelSize
},
// label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
label: {
type: [String, Number],
default: () => defProps.radio.label
},
// 整体的大小
size: {
type: [String, Number],
default: () => defProps.radio.size
},
// 图标颜色
color: {
type: String,
default: () => defProps.radio.color
},
// label的颜色
labelColor: {
type: String,
default: () => defProps.radio.labelColor
},
// 图标颜色
iconColor: {
type: String,
default: () => defProps.radio.iconColor
}
}
})
radio.js文件代码
export default {
// radio组件
radio: {
name: '',
// shape: '',
disabled: false,
labelDisabled: false,
activeColor: '#14C780',
inactiveColor: '#B5B8C0',
iconSize: 24,
labelSize: 16,
label: '',
labelColor: '#34373D',
size: 20,
iconColor: '#FFFFFF',
placement: 'row'
}
}
在以上代码中修改，新增dsl-radio单独的使用的v-model v-model需要兼容vue2和vue3的写法 ，不要多加是否单独使用的参数，因为代码中注释了这一行代码 // if (!this.parent) {
// console.error('dsl-radio必须搭配dsl-radio-group组件使用')
// }，判断!this.parent就是单独使用
也不用使用isvue2来判断是不是，可以在props.js中使用// #ifdef VUE3// #endif
// #ifdef VUE2// #endif判断
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
