From 3357046a40850cf739dc6e9d85c46c63496cccaf Mon Sep 17 00:00:00 2001 From: jry Date: Wed, 11 Sep 2024 21:03:44 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20up-radio=E7=9A=84uni-app-x=E7=89=88?= =?UTF-8?q?=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../up-radio-group/up-radio-group.uvue | 22 +-- .../components/up-radio/up-radio.uvue | 151 ++++++++++++------ .../uview-plus/libs/function/index.uts | 49 +++--- 3 files changed, 144 insertions(+), 78 deletions(-) diff --git a/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue b/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue index 4b86f9e89..d33d2818b 100644 --- a/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue +++ b/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue @@ -51,7 +51,7 @@ }, bemClass(): any { // this.bem为一个computed变量，在mixin中 - return this.bem('radio-group', [this.placement]) + return this.bem('radio-group', [this.placement], []) }, }, watch: { @@ -69,7 +69,7 @@ }, data() { return { - children: [], + children: [] as any[], } }, created() { @@ -79,20 +79,20 @@ // #endif methods: { // 将其他的radio设置为未选中的状态 - unCheckedOther(childInstance) { + unCheckedOther(childInstance: any) { this.children.map(child => { // 所有子radio中，被操作组件实例的checked的值无需修改 if (childInstance !== child) { - child.checked = false + // child['checked'] = false } }) - const { - name - } = childInstance - // 通过emit事件，设置父组件通过v-model双向绑定的值 - this.$emit("update:modelValue", name); - // 发出事件 - this.$emit('change', name) + // const { + // name + // } = childInstance + // // 通过emit事件，设置父组件通过v-model双向绑定的值 + // this.$emit("update:modelValue", name); + // // 发出事件 + // this.$emit('change', name) }, } } diff --git a/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue b/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue index 27f42c155..ebc742632 100644 --- a/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue +++ b/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue @@ -3,9 +3,9 @@ class="up-radio cursor-pointer" @tap.stop="wrapperClickHandler" :style="[radioStyle]" - :class="[`up-radio-label--${parentData.iconPlacement}`, - parentData.borderBottom != '' && parentData.placement === 'column' - && 'up-border-bottom']" + :class="[`up-radio-label--${parentData['iconPlacement']}`, + (parentData['borderBottom'] != '' && parentData['placement'] === 'column') + ? 'up-border-bottom' : '']" > 门掩黄昏，无计留春住 */ + type parentDataType = { + iconSize: string, + labelColor: string, + labelSize: string, + labelDisabled: boolean, + disabled: boolean, + shape: string, + activeColor: string, + inactiveColor: string, + size: string, + value: any, + modelValue: any, + iconColor: string, + placement: string, + borderBottom: boolean, + iconPlacement: string + } export default { name: "up-radio", mixins: [mpMixin, mixin, propsRadio], @@ -71,16 +88,18 @@ // 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式 // 故只能使用如此方法 parentData: { - iconSize: 12, - labelDisabled: null, - disabled: null, - shape: null, - activeColor: null, - inactiveColor: null, - size: 18, - value: null, - modelValue: null, - iconColor: null, + iconSize: '12px', + labelDisabled: false, + labelColor: '', + labelSize: '', + disabled: false, + shape: '', + activeColor: '', + inactiveColor: '', + size: '18px', + value: '', + modelValue: '', + iconColor: '', placement: 'row', borderBottom: false, iconPlacement: 'left' @@ -90,46 +109,80 @@ computed: { // 是否禁用，如果父组件up-raios-group禁用的话，将会忽略子组件的配置 elDisabled(): boolean { - return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false; + let disabledStr = this.disabled.toString() + if (disabledStr !== '') { + if (disabledStr == 'true') { + return true + } else { + return false + } + } else { + return this.parentData['disabled'] as boolean + } }, // 是否禁用label点击 elLabelDisabled(): boolean { - return this.labelDisabled !== '' ? this.labelDisabled : this.parentData.labelDisabled !== null ? this.parentData.labelDisabled : - false; + let labelDisabledStr = this.labelDisabled.toString() + if (labelDisabledStr !== '') { + if (labelDisabledStr == 'true') { + return true + } else { + return false + } + } else { + return this.parentData['labelDisabled'] as boolean + } }, // 组件尺寸，对应size的值，默认值为21px elSize(): string { - return this.size ? this.size : (this.parentData.size ? this.parentData.size : 21); + return this.size.toString() != '' + ? this.size.toString() + : (this.parentData['size'].toString() != '' ? this.parentData['size'].toString() : '21px'); }, // 组件的勾选图标的尺寸，默认12px - elIconSize(): string { - return this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 12); + elIconSize(): any { + return this.iconSize.toString() != '' + ? this.iconSize.toString() + : (this.parentData['iconSize'].toString() != '' ? this.parentData['iconSize'].toString() : '12px'); }, // 组件选中激活时的颜色 elActiveColor(): string { - return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff'); + return this.activeColor != '' + ? this.activeColor + : (this.parentData['activeColor'] as string != '' ? this.parentData['activeColor'] as string : '#2979ff'); }, // 组件选未中激活时的颜色 elInactiveColor(): string { - return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor : + return this.inactiveColor != '' + ? this.inactiveColor + : (this.parentData['inactiveColor'] as string !='' ? this.parentData['inactiveColor'] as string : '#c8c9cc'); }, // label的颜色 elLabelColor(): string { - return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266') + return this.labelColor != '' + ? this.labelColor + : (this.parentData['labelColor'] as string !='' ? this.parentData['labelColor'] as string : '#606266') }, // 组件的形状 elShape(): string { - return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle'); + return this.shape !='' + ? this.shape + : (this.parentData['shape'] as string != '' ? this.parentData['shape'] as string : 'circle'); }, // label大小 elLabelSize(): string { - return addUnit(this.labelSize ? this.labelSize : (this.parentData.labelSize ? this.parentData.labelSize : + return addUnit( + this.labelSize.toString() != '' + ? this.labelSize.toString() + : (this.parentData['labelSize'].toString() != '' ? this.parentData['labelSize'].toString() : '15')) }, elIconColor(): string { - const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor : - '#ffffff'); + const iconColor = this.iconColor != '' + ? this.iconColor + : (this.parentData['iconColor'] as string != '' ? this.parentData['iconColor'] as string : + '#ffffff'); // 图标的颜色 if (this.elDisabled) { // disabled状态下，已勾选的radio图标改为elInactiveColor @@ -139,7 +192,7 @@ } }, iconClasses(): string { - let classes = [] + let classes: string[]= [] // 组件的形状 classes.push('up-radio__icon-wrap--' + this.elShape) if (this.elDisabled) { @@ -148,31 +201,32 @@ if (this.checked && this.elDisabled) { classes.push('up-radio__icon-wrap--disabled--checked') } - classes = classes.join(' ') - return classes + return classes.join(' ') }, - iconWrapStyle(): string { + iconWrapStyle(): any { // radio的整体样式 const style = {} - style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff' - style.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor - style.width = addUnit(this.elSize) - style.height = addUnit(this.elSize) + style['backgroundColor'] = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff' + style['borderColor'] = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor + style['width'] = addUnit(this.elSize) + style['height'] = addUnit(this.elSize) // 如果是图标在右边的话，移除它的右边距 - if (this.parentData.iconPlacement === 'right') { - style.marginRight = 0 + if (this.parentData['iconPlacement'] === 'right') { + style['marginRight'] = 0 } return style }, radioStyle(): any { const style = {} - if(this.parentData.borderBottom && this.parentData.placement === 'row') { + if(this.parentData['borderBottom'] as boolean + && this.parentData['placement'] as string === 'row') { error('检测到您将borderBottom设置为true，需要同时将up-radio-group的placement设置为column才有效') } // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔 - if(this.parentData.borderBottom && this.parentData.placement === 'column') { + if(this.parentData['borderBottom'] as boolean + && this.parentData['placement'] as string === 'column') { // ios像素密度高，需要多一点的距离 - style.paddingBottom = os() === 'ios' ? '12px' : '8px' + style['paddingBottom'] = os() === 'ios' ? '12px' : '8px' } return deepMerge(style, addStyle(this.customStyle)) } @@ -182,14 +236,14 @@ }, emits: ["change"], methods: { - init(): voif { + init(): void { // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用 this.updateParentData() - if (!this.parent) { + if (this.parent == null) { error('up-radio必须搭配up-radio-group组件使用') } // 设置初始化时，是否默认选中的状态 - this.checked = this.name === this.parentData.modelValue + this.checked = this.name === this.parentData['modelValue'] }, updateParentData(): void { this.getParentData('up-radio-group') @@ -204,7 +258,9 @@ }, // 横向两端排列时，点击组件即可触发选中事件 wrapperClickHandler(e: any): void { - this.parentData['iconPlacement'] === 'right' && this.iconClickHandler(e) + if (this.parentData['iconPlacement'] === 'right') { + this.iconClickHandler(e) + } }, // 点击label labelClickHandler(e: any): void { @@ -231,7 +287,9 @@ this.emitEvent() // 将本组件标记为选中状态 this.checked = true - this.parent.unCheckedOther(this) + if (this.parent != null) { + // this.parent.unCheckedOther(this) + } } } } @@ -244,7 +302,7 @@ $up-radio-wrap-border-width:1px !default; $up-radio-wrap-border-color: #c8c9cc !default; $up-radio-line-height:0 !default; - $up-radio-circle-border-radius:100% !default; + $up-radio-circle-border-radius:50px !default; $up-radio-square-border-radius:3px !default; $up-radio-checked-color:#fff !default; $up-radio-checked-background-color:red !default; @@ -325,9 +383,6 @@ } &__label { - /* #ifndef APP-NVUE */ - word-wrap: break-word; - /* #endif */ margin-left: $up-radio-label-margin-left; margin-right: $up-radio-label-margin-right; color: $up-radio-label-color; diff --git a/src/uni_modules/uview-plus/libs/function/index.uts b/src/uni_modules/uview-plus/libs/function/index.uts index fffa4fdb8..034060676 100644 --- a/src/uni_modules/uview-plus/libs/function/index.uts +++ b/src/uni_modules/uview-plus/libs/function/index.uts @@ -28,7 +28,8 @@ export function getPx(valueOri: any, unit = false): string { return unit ? `${value}px` : (value) } // 如果带有rpx，先取出其数值部分，再转为px值 - if (/(rpx|upx)$/.test(value)) { + if (/(rpx|upx)$/.test(value)) { + // todo // return unit ? `${uni.upx2px(parseInt(value)).toString()}px` : uni.upx2px(parseInt(value)) } return unit ? `${value}px` : (value) @@ -587,24 +588,34 @@ export function priceFormat(numberOri: any, decimals = 0, decimalPoint = '.', th return s.join(dec) } -// /** -// * @description 获取duration值 -// * 如果带有ms或者s直接返回，如果大于一定值，认为是ms单位，小于一定值，认为是s单位 -// * 比如以30位阈值，那么300大于30，可以理解为用户想要的是300ms，而不是想花300s去执行一个动画 -// * @param {String|number} value 比如: "1s"|"100ms"|1|100 -// * @param {boolean} unit 提示: 如果是false 默认返回number -// * @return {string|number} -// */ -// export function getDuration(value, unit = true): any { -// const valueNum = parseInt(value) -// if (unit) { -// if (/s$/.test(value)) return value -// return value > 30 ? `${value}ms` : `${value}s` -// } -// if (/ms$/.test(value)) return valueNum -// if (/s$/.test(value)) return valueNum > 30 ? valueNum : valueNum * 1000 -// return valueNum -// } +/** + * @description 获取duration值 + * 如果带有ms或者s直接返回，如果大于一定值，认为是ms单位，小于一定值，认为是s单位 + * 比如以30位阈值，那么300大于30，可以理解为用户想要的是300ms，而不是想花300s去执行一个动画 + * @param {String|number} value 比如: "1s"|"100ms"|1|100 + * @param {boolean} unit 提示: 如果是false 默认返回number + * @return {string|number} + */ +export function getDuration(value: any, unit = true): string { + let valueString = value.toString() + if (unit) { + if (/s$/.test(valueString)) { + return value + } + return parseInt(valueString) > 30 ? `${valueString}ms` : `${valueString}s` + } + let valueNum = 0 + if (/(ms)$/.test(valueString)) { + valueNum = parseInt(valueString.slice(-2)) + return valueNum.toString() + } else if (/(s)$/.test(valueString)) { + valueNum = parseInt(valueString.slice(-1)) + return valueNum > 30 ? valueNum.toString() : (valueNum * 1000).toString() + } else { + valueNum = parseInt(valueString) + return valueNum.toString() + } +} // /** // * @description 日期的月或日补零操作