Skip to content

Commit

Permalink
fix: up-radio的uni-app-x版本
Browse files Browse the repository at this point in the history
  • Loading branch information
jry committed Sep 11, 2024
1 parent d7d5604 commit 3357046
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 78 deletions.
22 changes: 11 additions & 11 deletions src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -69,7 +69,7 @@
},
data() {
return {
children: [],
children: [] as any[],
}
},
created() {
Expand All @@ -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)
},
}
}
Expand Down
151 changes: 103 additions & 48 deletions src/uni_modules/uview-plus/components/up-radio/up-radio.uvue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' : '']"
>
<view
class="up-radio__icon-wrap cursor-pointer"
Expand Down Expand Up @@ -61,6 +61,23 @@
* @event {Function} change 某个radio状态发生变化时触发(选中状态)
* @example <up-radio :labelDisabled="false">门掩黄昏，无计留春住</up-radio>
*/
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],
Expand All @@ -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'
Expand All @@ -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
Expand All @@ -139,7 +192,7 @@
}
},
iconClasses(): string {
let classes = []
let classes: string[]= []
// 组件的形状
classes.push('up-radio__icon-wrap--' + this.elShape)
if (this.elDisabled) {
Expand All @@ -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))
}
Expand All @@ -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')
Expand All @@ -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 {
Expand All @@ -231,7 +287,9 @@
this.emitEvent()
// 将本组件标记为选中状态
this.checked = true
this.parent.unCheckedOther(this)
if (this.parent != null) {
// this.parent.unCheckedOther(this)
}
}
}
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
49 changes: 30 additions & 19 deletions src/uni_modules/uview-plus/libs/function/index.uts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 日期的月或日补零操作
Expand Down

0 comments on commit 3357046

Please sign in to comment.