From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue | 344 ---------------------------------------------------------
1 files changed, 0 insertions(+), 344 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 6429cca..e69de29 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
@@ -1,344 +0,0 @@
-<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