From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-checkbox/u-checkbox.vue | 284 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 284 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-checkbox/u-checkbox.vue b/uview-ui/components/u-checkbox/u-checkbox.vue
new file mode 100644
index 0000000..9414461
--- /dev/null
+++ b/uview-ui/components/u-checkbox/u-checkbox.vue
@@ -0,0 +1,284 @@
+<template>
+ <view class="u-checkbox" :style="[checkboxStyle]">
+ <view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
+ <u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor"/>
+ </view>
+ <view class="u-checkbox__label" @tap="onClickLabel" :style="{
+ fontSize: $u.addUnit(labelSize)
+ }">
+ <slot />
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * checkbox 澶嶉�夋
+ * @description 璇ョ粍浠堕渶瑕佹惌閰峜heckboxGroup缁勪欢浣跨敤锛屼互渚跨敤鎴疯繘琛屾搷浣滄椂锛岃幏寰楀綋鍓嶅閫夋缁勭殑閫変腑鎯呭喌銆�
+ * @tutorial https://www.uviewui.com/components/checkbox.html
+ * @property {String Number} icon-size 鍥炬爣澶у皬锛屽崟浣峳px锛堥粯璁�20锛�
+ * @property {String Number} label-size label瀛椾綋澶у皬锛屽崟浣峳px锛堥粯璁�28锛�
+ * @property {String Number} name checkbox缁勪欢鐨勬爣绀虹
+ * @property {String} shape 褰㈢姸锛岃瀹樼綉璇存槑锛堥粯璁ircle锛�
+ * @property {Boolean} disabled 鏄惁绂佺敤
+ * @property {Boolean} label-disabled 鏄惁绂佹鐐瑰嚮鏂囨湰鎿嶄綔checkbox
+ * @property {String} active-color 閫変腑鏃剁殑棰滆壊锛屽璁剧疆CheckboxGroup鐨刟ctive-color灏嗗け鏁�
+ * @event {Function} change 鏌愪釜checkbox鐘舵�佸彂鐢熷彉鍖栨椂瑙﹀彂锛屽洖璋冧负涓�涓璞�
+ * @example <u-checkbox v-model="checked" :disabled="false">澶╂动</u-checkbox>
+ */
+ export default {
+ name: "u-checkbox",
+ props: {
+ // checkbox鐨勫悕绉�
+ name: {
+ type: [String, Number],
+ default: ''
+ },
+ // 褰㈢姸锛宻quare涓烘柟褰紝circle涓哄師鍨�
+ shape: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁涓洪�変腑鐘舵��
+ value: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁绂佺敤
+ disabled: {
+ type: [String, Boolean],
+ default: ''
+ },
+ // 鏄惁绂佹鐐瑰嚮鎻愮ず璇�変腑澶嶉�夋
+ labelDisabled: {
+ type: [String, Boolean],
+ default: ''
+ },
+ // 閫変腑鐘舵�佷笅鐨勯鑹诧紝濡傝缃鍊硷紝灏嗕細瑕嗙洊checkboxGroup鐨刟ctiveColor鍊�
+ activeColor: {
+ type: String,
+ default: ''
+ },
+ // 鍥炬爣鐨勫ぇ灏忥紝鍗曚綅rpx
+ iconSize: {
+ type: [String, Number],
+ default: ''
+ },
+ // label鐨勫瓧浣撳ぇ灏忥紝rpx鍗曚綅
+ labelSize: {
+ type: [String, Number],
+ default: ''
+ },
+ // 缁勪欢鐨勬暣浣撳ぇ灏�
+ size: {
+ type: [String, Number],
+ default: ''
+ },
+ },
+ data() {
+ return {
+ parentDisabled: false,
+ newParams: {},
+ };
+ },
+ created() {
+ // 鏀粯瀹濆皬绋嬪簭涓嶆敮鎸乸rovide/inject锛屾墍浠ヤ娇鐢ㄨ繖涓柟娉曡幏鍙栨暣涓埗缁勪欢锛屽湪created瀹氫箟锛岄伩鍏嶅惊鐜簲鐢�
+ this.parent = this.$u.$parent.call(this, 'u-checkbox-group');
+ // 濡傛灉瀛樺湪u-checkbox-group锛屽皢鏈粍浠剁殑this濉炶繘鐖剁粍浠剁殑children涓�
+ this.parent && this.parent.children.push(this);
+ },
+ computed: {
+ // 鏄惁绂佺敤锛屽鏋滅埗缁勪欢u-checkbox-group绂佺敤鐨勮瘽锛屽皢浼氬拷鐣ュ瓙缁勪欢鐨勯厤缃�
+ isDisabled() {
+ return this.disabled !== '' ? this.disabled : this.parent ? this.parent.disabled : false;
+ },
+ // 鏄惁绂佺敤label鐐瑰嚮
+ isLabelDisabled() {
+ return this.labelDisabled !== '' ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false;
+ },
+ // 缁勪欢灏哄锛屽搴攕ize鐨勫�硷紝榛樿鍊间负34rpx
+ checkboxSize() {
+ return this.size ? this.size : (this.parent ? this.parent.size : 34);
+ },
+ // 缁勪欢鐨勫嬀閫夊浘鏍囩殑灏哄锛岄粯璁�20
+ checkboxIconSize() {
+ return this.iconSize ? this.iconSize : (this.parent ? this.parent.iconSize : 20);
+ },
+ // 缁勪欢閫変腑婵�娲绘椂鐨勯鑹�
+ elActiveColor() {
+ return this.activeColor ? this.activeColor : (this.parent ? this.parent.activeColor : 'primary');
+ },
+ // 缁勪欢鐨勫舰鐘�
+ elShape() {
+ return this.shape ? this.shape : (this.parent ? this.parent.shape : 'square');
+ },
+ iconStyle() {
+ let style = {};
+ // 鏃㈣鍒ゆ柇鏄惁鎵嬪姩绂佺敤锛岃繕瑕佸垽鏂敤鎴穠-model缁戝畾鐨勫�硷紝濡傛灉缁戝畾涓篺alse锛岄偅涔堜篃鏃犳硶閫変腑
+ if (this.elActiveColor && this.value && !this.isDisabled) {
+ style.borderColor = this.elActiveColor;
+ style.backgroundColor = this.elActiveColor;
+ }
+ style.width = this.$u.addUnit(this.checkboxSize);
+ style.height = this.$u.addUnit(this.checkboxSize);
+ return style;
+ },
+ // checkbox鍐呴儴鐨勫嬀閫夊浘鏍囷紝濡傛灉閫変腑鐘舵�侊紝涓虹櫧鑹诧紝鍚﹀垯涓洪�忔槑鑹插嵆鍙�
+ iconColor() {
+ return this.value ? '#ffffff' : 'transparent';
+ },
+ iconClass() {
+ let classes = [];
+ classes.push('u-checkbox__icon-wrap--' + this.elShape);
+ if (this.value == true) classes.push('u-checkbox__icon-wrap--checked');
+ if (this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled');
+ if (this.value && this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled--checked');
+ // 鏀粯瀹濆皬绋嬪簭鏃犳硶鍔ㄦ�佺粦瀹氫竴涓暟缁勭被鍚嶏紝鍚﹀垯瑙ｆ瀽鍑烘潵鐨勭粨鏋滀細甯︽湁","锛岃�屽鑷村け鏁�
+ return classes.join(' ');
+ },
+ checkboxStyle() {
+ let style = {};
+ if(this.parent && this.parent.width) {
+ style.width = this.parent.width;
+ // #ifdef MP
+ // 鍚勫灏忕▼搴忓洜涓哄畠浠壒娈婄殑缂栬瘧缁撴瀯锛屼娇鐢╢loat甯冨眬
+ style.float = 'left';
+ // #endif
+ // #ifndef MP
+ // H5鍜孉PP浣跨敤flex甯冨眬
+ style.flex = `0 0 ${this.parent.width}`;
+ // #endif
+ }
+ if(this.parent && this.parent.wrap) {
+ style.width = '100%';
+ // #ifndef MP
+ // H5鍜孉PP浣跨敤flex甯冨眬锛屽皢瀹藉害璁剧疆100%锛屽嵆鍙嚜鍔ㄦ崲琛�
+ style.flex = '0 0 100%';
+ // #endif
+ }
+ return style;
+ }
+ },
+ methods: {
+ onClickLabel() {
+ if (!this.isLabelDisabled && !this.isDisabled) {
+ this.setValue();
+ }
+ },
+ toggle() {
+ if (!this.isDisabled) {
+ this.setValue();
+ }
+ },
+ emitEvent() {
+ this.$emit('change', {
+ value: !this.value,
+ name: this.name
+ })
+ // 鎵ц鐖剁粍浠秛-checkbox-group鐨勪簨浠舵柟娉�
+ // 绛夊緟涓嬩竴涓懆鏈熷啀鎵ц锛屽洜涓簍his.$emit('input')浣滅敤浜庣埗缁勪欢锛屽啀鍙嶉鍒板瓙缁勪欢鍐呴儴锛岄渶瑕佹椂闂�
+ setTimeout(() => {
+ if(this.parent && this.parent.emitEvent) this.parent.emitEvent();
+ }, 80);
+ },
+ // 璁剧疆input鐨勫�硷紝杩欓噷閫氳繃input浜嬩欢锛岃缃�氳繃v-model缁戝畾鐨勭粍浠剁殑鍊�
+ setValue() {
+ // 鍒ゆ柇鏄惁瓒呰繃浜嗗彲閫夌殑鏈�澶ф暟閲�
+ let checkedNum = 0;
+ if(this.parent && this.parent.children) {
+ // 鍙鐖剁粍浠剁殑鏌愪竴涓瓙鍏冪礌鐨剉alue涓簍rue锛屽氨鍔�1(宸叉湁鐨勯�変腑鏁伴噺)
+ this.parent.children.map(val => {
+ if (val.value) checkedNum++;
+ })
+ }
+ // 濡傛灉鍘熸潵涓洪�変腑鐘舵�侊紝閭ｄ箞鍙互鍙栨秷
+ if (this.value == true) {
+ this.emitEvent();
+ this.$emit('input', !this.value);
+ } else {
+ // 濡傛灉瓒呭嚭鏈�澶氬彲閫夐」锛屾彁绀�
+ if(this.parent && checkedNum >= this.parent.max) {
+ return this.$u.toast(`鏈�澶氬彲閫�${this.parent.max}椤筦);
+ }
+ // 濡傛灉鍘熸潵涓烘湭閫変腑鐘舵�侊紝闇�瑕侀�変腑鐨勬暟閲忓皯浜庣埗缁勪欢涓缃殑max鍊硷紝鎵嶅彲浠ラ�変腑
+ this.emitEvent();
+ this.$emit('input', !this.value);
+ }
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-checkbox {
+ /* #ifndef APP-NVUE */
+ display: inline-flex;
+ /* #endif */
+ align-items: center;
+ overflow: hidden;
+ user-select: none;
+ line-height: 1.8;
+
+ &__icon-wrap {
+ color: $u-content-color;
+ flex: none;
+ display: -webkit-flex;
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ width: 42rpx;
+ height: 42rpx;
+ color: transparent;
+ text-align: center;
+ transition-property: color, border-color, background-color;
+ font-size: 20px;
+ border: 1px solid #c8c9cc;
+ transition-duration: 0.2s;
+
+ /* #ifdef MP-TOUTIAO */
+ // 澶存潯灏忕▼搴忓吋瀹规�ч棶棰橈紝闇�瑕佽缃楂樹负0锛屽惁鍒欏浘鏍囧亸涓�
+ &__icon {
+ line-height: 0;
+ }
+ /* #endif */
+
+ &--circle {
+ border-radius: 100%;
+ }
+
+ &--square {
+ border-radius: 6rpx;
+ }
+
+ &--checked {
+ color: #fff;
+ background-color: $u-type-primary;
+ border-color: $u-type-primary;
+ }
+
+ &--disabled {
+ background-color: #ebedf0;
+ border-color: #c8c9cc;
+ }
+
+ &--disabled--checked {
+ color: #c8c9cc !important;
+ }
+ }
+
+ &__label {
+ word-wrap: break-word;
+ margin-left: 10rpx;
+ margin-right: 24rpx;
+ color: $u-content-color;
+ font-size: 30rpx;
+
+ &--disabled {
+ color: #c8c9cc;
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3