From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue | 344 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 344 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue b/minipro_standard/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue
index e69de29..6429cca 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue
+++ b/minipro_standard/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 褰㈢姸锛宻quare涓烘柟褰紝circle涓哄渾鍨�
+ * @property {String | Number} size 鏁翠綋鐨勫ぇ灏�
+ * @property {Boolean} checked 鏄惁榛樿閫変腑
+ * @property {String | Boolean} disabled 鏄惁绂佺敤
+ * @property {String} activeColor 閫変腑鐘舵�佷笅鐨勯鑹诧紝濡傝缃鍊硷紝灏嗕細瑕嗙洊parent鐨刟ctiveColor鍊�
+ * @property {String} inactiveColor 鏈�変腑鐨勯鑹�
+ * @property {String | Number} iconSize 鍥炬爣鐨勫ぇ灏忥紝鍗曚綅px
+ * @property {String} iconColor 鍥炬爣棰滆壊
+ * @property {String | Number} label label鎻愮ず鏂囧瓧锛屽洜涓簄vue涓嬶紝鐩存帴slot杩涙潵鐨勬枃瀛楋紝鐢变簬鐗规畩鐨勭粨鏋勶紝鏃犳硶淇敼鏍峰紡
+ * @property {String} labelColor label鐨勯鑹�
+ * @property {String | Number} labelSize label鐨勫瓧浣撳ぇ灏忥紝px鍗曚綅
+ * @property {String | Boolean} labelDisabled 鏄惁绂佹鐐瑰嚮鎻愮ず璇�変腑澶嶉�夋
+ * @property {Object} customStyle 瀹氫箟闇�瑕佺敤鍒扮殑澶栭儴鏍峰紡
+ *
+ * @event {Function} change 浠讳竴涓猚heckbox鐘舵�佸彂鐢熷彉鍖栨椂瑙﹀彂锛屽洖璋冧负涓�涓璞�
+ * @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,
+ // 鐖剁粍浠剁殑榛樿鍊硷紝鍥犱负澶存潯灏忕▼搴忎笉鏀寔鍦╟omputed涓娇鐢╰his.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;
+ },
+ // 缁勪欢灏哄锛屽搴攕ize鐨勫�硷紝榛樿鍊间负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璁剧疆涓簍rue锛岄渶瑕佸悓鏃跺皢u-checkbox-group鐨刾lacement璁剧疆涓篶olumn鎵嶆湁鏁�')
+ }
+ // 褰撶埗缁勪欢璁剧疆浜嗘樉绀轰笅杈规骞朵笖鎺掑垪褰㈠紡涓虹旱鍚戞椂锛岀粰鍐呭鍜岃竟妗嗕箣闂村姞涓婁竴瀹氶棿闅�
+ 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() {
+ // 鏀粯瀹濆皬绋嬪簭涓嶆敮鎸乸rovide/inject锛屾墍浠ヤ娇鐢ㄨ繖涓柟娉曡幏鍙栨暣涓埗缁勪欢锛屽湪created瀹氫箟锛岄伩鍏嶅惊鐜紩鐢�
+ this.updateParentData()
+ if (!this.parent) {
+ uni.$u.error('u-checkbox蹇呴』鎼厤u-checkbox-group缁勪欢浣跨敤')
+ }
+ // 璁剧疆鍒濆鍖栨椂锛屾槸鍚﹂粯璁ら�変腑鐨勭姸鎬侊紝鐖剁粍浠秛-checkbox-group鐨剉alue鍙兘鏄痑rray锛屾墍浠ラ澶栧垽鏂�
+ if (this.checked) {
+ this.isChecked = true
+ } else if (uni.$u.test.array(this.parentData.value)) {
+ // 鏌ユ壘鏁扮粍鏄槸鍚﹀瓨鍦╰his.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)
+ // 濡傛灉鎸夐挳鏁翠綋琚鐢ㄦ垨鑰卨abel琚鐢紝鍒欎笉鍏佽鐐瑰嚮鏂囧瓧淇敼鐘舵��
+ if (!this.elLabelDisabled && !this.elDisabled) {
+ this.setRadioCheckedStatus()
+ }
+ },
+ emitEvent() {
+ this.$emit('change', this.isChecked)
+ // 灏濊瘯璋冪敤u-form鐨勯獙璇佹柟娉曪紝杩涜涓�瀹氬欢杩燂紝鍚﹀垯寰俊灏忕▼搴忔洿鏂板彲鑳戒細涓嶅強鏃�
+ this.$nextTick(() => {
+ uni.$u.formValidate(this, 'change')
+ })
+ },
+ // 鏀瑰彉缁勪欢閫変腑鐘舵��
+ // 杩欓噷鐨勬敼鍙樼殑渚濇嵁鏄紝鏇存敼鏈粍浠剁殑checked鍊间负true锛屽悓鏃堕�氳繃鐖剁粍浠堕亶鍘嗘墍鏈塽-checkbox瀹炰緥
+ // 灏嗘湰缁勪欢澶栫殑鍏朵粬u-checkbox鐨刢hecked閮借缃负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.9.3