From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 20 Oct 2023 15:21:35 +0800 Subject: [PATCH] fix:立行立改Uniapp小程序新建项目 --- uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue | 344 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 344 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue b/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue new file mode 100644 index 0000000..6429cca --- /dev/null +++ b/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue @@ -0,0 +1,344 @@ +<template> + <view + class="u-checkbox" + :style="[checkboxStyle]" + @tap.stop="wrapperClickHandler" + :class="[`u-checkbox-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom']" + > + <view + class="u-checkbox__icon-wrap" + @tap.stop="iconClickHandler" + :class="iconClasses" + :style="[iconWrapStyle]" + > + <slot name="icon"> + <u-icon + class="u-checkbox__icon-wrap__icon" + name="checkbox-mark" + :size="elIconSize" + :color="elIconColor" + /> + </slot> + </view> + <text + @tap.stop="labelClickHandler" + :style="{ + color: elDisabled ? elInactiveColor : elLabelColor, + fontSize: elLabelSize, + lineHeight: elLabelSize + }" + >{{label}}</text> + </view> +</template> + +<script> + import props from './props.js'; + /** + * checkbox ��������� + * @description ��������������������������������������������������������������������������������������������� + * @tutorial https://uviewui.com/components/checkbox.html + * @property {String | Number | Boolean} name checkbox������������������ + * @property {String} shape ���������square������������circle��������� + * @property {String | Number} size ��������������� + * @property {Boolean} checked ������������������ + * @property {String | Boolean} disabled ������������ + * @property {String} activeColor ���������������������������������������������������������parent���activeColor��� + * @property {String} inactiveColor ������������������ + * @property {String | Number} iconSize ������������������������px + * @property {String} iconColor ������������ + * @property {String | Number} label label���������������������nvue������������slot������������������������������������������������������������ + * @property {String} labelColor label��������� + * @property {String | Number} labelSize label������������������px������ + * @property {String | Boolean} labelDisabled ������������������������������������������ + * @property {Object} customStyle ��������������������������������� + * + * @event {Function} change ���������checkbox��������������������������������������������������� + * @example <u-checkbox v-model="checked" :disabled="false">������</u-checkbox> + */ + export default { + name: "u-checkbox", + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + data() { + return { + isChecked: false, + // ���������������������������������������������������������computed���������this.parent.shape��������� + // ��������������������������� + parentData: { + iconSize: 12, + labelDisabled: null, + disabled: null, + shape: 'square', + 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������������������������checkbox������������elInactiveColor + return this.isChecked ? this.elInactiveColor : 'transparent' + } else { + return this.isChecked ? iconColor : 'transparent' + } + }, + iconClasses() { + let classes = [] + // ��������������� + classes.push('u-checkbox__icon-wrap--' + this.elShape) + if (this.elDisabled) { + classes.push('u-checkbox__icon-wrap--disabled') + } + if (this.isChecked && this.elDisabled) { + classes.push('u-checkbox__icon-wrap--disabled--checked') + } + // ������������������������������������������������������������������������������������������������������","������������������ + // #ifdef MP-ALIPAY || MP-TOUTIAO + classes = classes.join(' ') + // #endif + return classes + }, + iconWrapStyle() { + // checkbox��������������� + const style = {} + style.backgroundColor = this.isChecked && !this.elDisabled ? this.elActiveColor : '#ffffff' + style.borderColor = this.isChecked && !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 + }, + checkboxStyle() { + const style = {} + if (this.parentData.borderBottom && this.parentData.placement === 'row') { + uni.$u.error('���������������borderBottom���������true������������������u-checkbox-group���placement���������column���������') + } + // ��������������������������������������������������������������������������������������������������������������� + if (this.parentData.borderBottom && this.parentData.placement === 'column') { + style.paddingBottom = '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-checkbox������������u-checkbox-group������������') + } + // ������������������������������������������������������������u-checkbox-group���value���������array��������������������� + if (this.checked) { + this.isChecked = true + } else if (uni.$u.test.array(this.parentData.value)) { + // ���������������������������this.name��������� + this.isChecked = this.parentData.value.some(item => { + return item === this.name + }) + } + }, + updateParentData() { + this.getParentData('u-checkbox-group') + }, + // ������������������������������������������������������������ + wrapperClickHandler(e) { + this.parentData.iconPlacement === 'right' && this.iconClickHandler(e) + }, + // ������������ + iconClickHandler(e) { + this.preventEvent(e) + // ������������������������������������������ + if (!this.elDisabled) { + this.setRadioCheckedStatus() + } + }, + // ������label + labelClickHandler(e) { + this.preventEvent(e) + // ���������������������������������label������������������������������������������������ + if (!this.elLabelDisabled && !this.elDisabled) { + this.setRadioCheckedStatus() + } + }, + emitEvent() { + this.$emit('change', this.isChecked) + // ������������u-form������������������������������������������������������������������������������������ + this.$nextTick(() => { + uni.$u.formValidate(this, 'change') + }) + }, + // ������������������������ + // ������������������������������������������������checked������true������������������������������������u-checkbox������ + // ������������������������u-checkbox���checked������������false(������������������������)��������������������������������������� + setRadioCheckedStatus() { + // ��������������������������������������������� + this.isChecked = !this.isChecked + this.emitEvent() + typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this) + } + }, + watch:{ + checked(){ + this.isChecked = this.checked + } + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + $u-checkbox-icon-wrap-margin-right:6px !default; + $u-checkbox-icon-wrap-font-size:6px !default; + $u-checkbox-icon-wrap-border-width:1px !default; + $u-checkbox-icon-wrap-border-color:#c8c9cc !default; + $u-checkbox-icon-wrap-icon-line-height:0 !default; + $u-checkbox-icon-wrap-circle-border-radius:100% !default; + $u-checkbox-icon-wrap-square-border-radius:3px !default; + $u-checkbox-icon-wrap-checked-color:#fff !default; + $u-checkbox-icon-wrap-checked-background-color:red !default; + $u-checkbox-icon-wrap-checked-border-color:#2979ff !default; + $u-checkbox-icon-wrap-disabled-background-color:#ebedf0 !default; + $u-checkbox-icon-wrap-disabled-checked-color:#c8c9cc !default; + $u-checkbox-label-margin-left:5px !default; + $u-checkbox-label-margin-right:12px !default; + $u-checkbox-label-color:$u-content-color !default; + $u-checkbox-label-font-size:15px !default; + $u-checkbox-label-disabled-color:#c8c9cc !default; + + .u-checkbox { + /* #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-checkbox-icon-wrap-margin-right; + + font-size: $u-checkbox-icon-wrap-font-size; + border-width: $u-checkbox-icon-wrap-border-width; + border-color: $u-checkbox-icon-wrap-border-color; + border-style: solid; + + /* #ifdef MP-TOUTIAO */ + // ������������������������������������������������������0��������������������� + &__icon { + line-height: $u-checkbox-icon-wrap-icon-line-height; + } + + /* #endif */ + + &--circle { + border-radius: $u-checkbox-icon-wrap-circle-border-radius; + } + + &--square { + border-radius: $u-checkbox-icon-wrap-square-border-radius; + } + + &--checked { + color: $u-checkbox-icon-wrap-checked-color; + background-color: $u-checkbox-icon-wrap-checked-background-color; + border-color: $u-checkbox-icon-wrap-checked-border-color; + } + + &--disabled { + background-color: $u-checkbox-icon-wrap-disabled-background-color !important; + } + + &--disabled--checked { + color: $u-checkbox-icon-wrap-disabled-checked-color !important; + } + } + + &__label { + /* #ifndef APP-NVUE */ + word-wrap: break-word; + /* #endif */ + margin-left: $u-checkbox-label-margin-left; + margin-right: $u-checkbox-label-margin-right; + color: $u-checkbox-label-color; + font-size: $u-checkbox-label-font-size; + + &--disabled { + color: $u-checkbox-label-disabled-color; + } + } + } +</style> -- Gitblit v1.8.0