From 66d2c8d8c97e19fdbd969f97dd3d6a28f27c415f Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 01 Nov 2023 16:07:03 +0800 Subject: [PATCH] fix:小程序分享功能和秒级数据 --- uni_modules/uview-ui/components/u-radio/u-radio.vue | 339 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 339 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-radio/u-radio.vue b/uni_modules/uview-ui/components/u-radio/u-radio.vue new file mode 100644 index 0000000..c0caab6 --- /dev/null +++ b/uni_modules/uview-ui/components/u-radio/u-radio.vue @@ -0,0 +1,339 @@ +<template> + <view + class="u-radio" + @tap.stop="wrapperClickHandler" + :style="[radioStyle]" + :class="[`u-radio-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom']" + > + <view + class="u-radio__icon-wrap" + @tap.stop="iconClickHandler" + :class="iconClasses" + :style="[iconWrapStyle]" + > + <slot name="icon"> + <u-icon + class="u-radio__icon-wrap__icon" + name="checkbox-mark" + :size="elIconSize" + :color="elIconColor" + /> + </slot> + </view> + <slot> + <text + class="u-radio__text" + @tap.stop="labelClickHandler" + :style="{ + color: elDisabled ? elInactiveColor : elLabelColor, + fontSize: elLabelSize, + lineHeight: elLabelSize + }" + >{{label}}</text> + </slot> + </view> +</template> + +<script> + import props from './props.js'; + /** + * radio ��������� + * @description ���������������������������������������������������������������������������������u-radio-group������ + * @tutorial https://www.uviewui.com/components/radio.html + * @property {String | Number} name radio��������� + * @property {String} shape ���������square������������circle��������� + * @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 <u-radio :labelDisabled="false">������������������������������</u-radio> + */ + export default { + name: "u-radio", + + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + data() { + return { + checked: false, + // ������������������������������������ + // ���������������������������������������������������������computed���������this.parent.shape��������� + // ��������������������������� + parentData: { + iconSize: 12, + labelDisabled: null, + disabled: null, + shape: null, + activeColor: null, + inactiveColor: null, + size: 18, + value: null, + iconColor: null, + placement: 'row', + borderBottom: false, + iconPlacement: 'left' + } + } + }, + computed: { + // ������������������������������u-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���������������������21px + elSize() { + return this.size ? this.size : (this.parentData.size ? this.parentData.size : 21); + }, + // ���������������������������������������12px + elIconSize() { + return this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 12); + }, + // ������������������������������ + elActiveColor() { + return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff'); + }, + // ��������������������������������� + elInactiveColor() { + return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor : + '#c8c9cc'); + }, + // label��������� + elLabelColor() { + return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266') + }, + // ��������������� + elShape() { + return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle'); + }, + // label������ + elLabelSize() { + return uni.$u.addUnit(this.labelSize ? this.labelSize : (this.parentData.labelSize ? this.parentData.labelSize : + '15')) + }, + elIconColor() { + const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor : + '#ffffff'); + // ��������������� + if (this.elDisabled) { + // disabled������������������������radio������������elInactiveColor + return this.checked ? this.elInactiveColor : 'transparent' + } else { + return this.checked ? iconColor : 'transparent' + } + }, + iconClasses() { + let classes = [] + // ��������������� + classes.push('u-radio__icon-wrap--' + this.elShape) + if (this.elDisabled) { + classes.push('u-radio__icon-wrap--disabled') + } + if (this.checked && this.elDisabled) { + classes.push('u-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.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor + style.width = uni.$u.addUnit(this.elSize) + style.height = uni.$u.addUnit(this.elSize) + // ������������������������������������������������������ + if (this.parentData.iconPlacement === 'right') { + style.marginRight = 0 + } + return style + }, + radioStyle() { + const style = {} + if(this.parentData.borderBottom && this.parentData.placement === 'row') { + uni.$u.error('���������������borderBottom���������true������������������u-radio-group���placement���������column���������') + } + // ��������������������������������������������������������������������������������������������������������������� + if(this.parentData.borderBottom && this.parentData.placement === 'column') { + // ios������������������������������������������ + style.paddingBottom = uni.$u.os() === 'ios' ? '12px' : '8px' + } + return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) + } + }, + mounted() { + this.init() + }, + methods: { + init() { + // ���������������������������provide/inject������������������������������������������������������created��������������������������� + this.updateParentData() + if (!this.parent) { + uni.$u.error('u-radio������������u-radio-group������������') + } + // ������������������������������������������������ + this.checked = this.name === this.parentData.value + }, + updateParentData() { + this.getParentData('u-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() { + // u-radio���checked������true���(������������������)��������������������������������������������������� + if (!this.checked) { + this.$emit('change', this.name) + // ������������u-form������������������������������������������������������������������������������������ + this.$nextTick(() => { + uni.$u.formValidate(this, 'change') + }) + } + }, + // ������������������������ + // ������������������������������������������������checked������true������������������������������������u-radio������ + // ������������������������u-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"; + $u-radio-wrap-margin-right:6px !default; + $u-radio-wrap-font-size:20px !default; + $u-radio-wrap-border-width:1px !default; + $u-radio-wrap-border-color: #c8c9cc !default; + $u-radio-line-height:0 !default; + $u-radio-circle-border-radius:100% !default; + $u-radio-square-border-radius:3px !default; + $u-radio-checked-color:#fff !default; + $u-radio-checked-background-color:red !default; + $u-radio-checked-border-color: #2979ff !default; + $u-radio-disabled-background-color:#ebedf0 !default; + $u-radio-disabled--checked-color:#c8c9cc !default; + $u-radio-label-margin-left: 5px !default; + $u-radio-label-margin-right:12px !default; + $u-radio-label-color:$u-content-color !default; + $u-radio-label-font-size:15px !default; + $u-radio-label-disabled-color:#c8c9cc !default; + + .u-radio { + /* #ifndef APP-NVUE */ + @include flex(row); + /* #endif */ + overflow: hidden; + flex-direction: row; + align-items: center; + + &-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 */ + color: $u-content-color; + @include flex; + align-items: center; + justify-content: center; + color: transparent; + text-align: center; + margin-right: $u-radio-wrap-margin-right; + font-size: $u-radio-wrap-font-size; + border-width: $u-radio-wrap-border-width; + border-color: $u-radio-wrap-border-color; + border-style: solid; + + /* #ifdef MP-TOUTIAO */ + // ������������������������������������������������������0��������������������� + &__icon { + line-height: $u-radio-line-height; + } + + /* #endif */ + + &--circle { + border-radius: $u-radio-circle-border-radius; + } + + &--square { + border-radius: $u-radio-square-border-radius; + } + + &--checked { + color: $u-radio-checked-color; + background-color: $u-radio-checked-background-color; + border-color: $u-radio-checked-border-color; + } + + &--disabled { + background-color: $u-radio-disabled-background-color !important; + } + + &--disabled--checked { + color: $u-radio-disabled--checked-color !important; + } + } + + &__label { + /* #ifndef APP-NVUE */ + word-wrap: break-word; + /* #endif */ + margin-left: $u-radio-label-margin-left; + margin-right: $u-radio-label-margin-right; + color: $u-radio-label-color; + font-size: $u-radio-label-font-size; + + &--disabled { + color: $u-radio-label-disabled-color; + } + } + } +</style> -- Gitblit v1.8.0