From e13367edf304cb78f978e321f1679299a66b3a23 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 10 Jan 2024 16:08:18 +0800
Subject: [PATCH] fix:地图
---
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