From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 103 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue b/uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue
new file mode 100644
index 0000000..7a6b4fa
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue
@@ -0,0 +1,103 @@
+<template>
+ <view
+ class="u-checkbox-group"
+ :class="bemClass"
+ >
+ <slot></slot>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ /**
+ * checkboxGroup 澶嶉�夋缁�
+ * @description 澶嶉�夋缁勪欢涓�鑸敤浜庨渶瑕佸涓�夋嫨鐨勫満鏅紝璇ョ粍浠跺姛鑳藉畬鏁达紝浣跨敤鏂逛究
+ * @tutorial https://www.uviewui.com/components/checkbox.html
+ * @property {String} name 鏍囪瘑绗�
+ * @property {Array} value 缁戝畾鐨勫��
+ * @property {String} shape 褰㈢姸锛宑ircle-鍦嗗舰锛宻quare-鏂瑰舰 锛堥粯璁� 'square' 锛�
+ * @property {Boolean} disabled 鏄惁绂佺敤鍏ㄩ儴checkbox 锛堥粯璁� false 锛�
+ * @property {String} activeColor 閫変腑鐘舵�佷笅鐨勯鑹诧紝濡傝缃鍊硷紝灏嗕細瑕嗙洊parent鐨刟ctiveColor鍊� 锛堥粯璁� '#2979ff' 锛�
+ * @property {String} inactiveColor 鏈�変腑鐨勯鑹� 锛堥粯璁� '#c8c9cc' 锛�
+ * @property {String | Number} size 鏁翠釜缁勪欢鐨勫昂瀵� 鍗曚綅px 锛堥粯璁� 18 锛�
+ * @property {String} placement 甯冨眬鏂瑰紡锛宺ow-妯悜锛宑olumn-绾靛悜 锛堥粯璁� 'row' 锛�
+ * @property {String | Number} labelSize label鐨勫瓧浣撳ぇ灏忥紝px鍗曚綅 锛堥粯璁� 14 锛�
+ * @property {String} labelColor label鐨勫瓧浣撻鑹� 锛堥粯璁� '#303133' 锛�
+ * @property {Boolean} labelDisabled 鏄惁绂佹鐐瑰嚮鏂囨湰鎿嶄綔 (榛樿 false )
+ * @property {String} iconColor 鍥炬爣棰滆壊 锛堥粯璁� '#ffffff' 锛�
+ * @property {String | Number} iconSize 鍥炬爣鐨勫ぇ灏忥紝鍗曚綅px 锛堥粯璁� 12 锛�
+ * @property {String} iconPlacement 鍕鹃�夊浘鏍囩殑瀵归綈鏂瑰紡锛宭eft-宸﹁竟锛宺ight-鍙宠竟 锛堥粯璁� 'left' 锛�
+ * @property {Boolean} borderBottom placement涓簉ow鏃讹紝鏄惁鏄剧ず涓嬭竟妗� 锛堥粯璁� false 锛�
+ * @event {Function} change 浠讳竴涓猚heckbox鐘舵�佸彂鐢熷彉鍖栨椂瑙﹀彂锛屽洖璋冧负涓�涓璞�
+ * @event {Function} input 淇敼閫氳繃v-model缁戝畾鐨勫�兼椂瑙﹀彂锛屽洖璋冧负涓�涓璞�
+ * @example <u-checkbox-group></u-checkbox-group>
+ */
+ export default {
+ name: 'u-checkbox-group',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+ computed: {
+ // 杩欓噷computed鐨勫彉閲忥紝閮芥槸瀛愮粍浠秛-checkbox闇�瑕佺敤鍒扮殑锛岀敱浜庡ご鏉″皬绋嬪簭鐨勫吋瀹规�у樊寮傦紝瀛愮粍浠舵棤娉曞疄鏃剁洃鍚埗缁勪欢鍙傛暟鐨勫彉鍖�
+ // 鎵�浠ラ渶瑕佹墜鍔ㄩ�氱煡瀛愮粍浠讹紝杩欓噷杩斿洖涓�涓猵arentData鍙橀噺锛屼緵watch鐩戝惉锛屽湪鍏朵腑鍘婚�氱煡姣忎竴涓瓙缁勪欢閲嶆柊浠庣埗缁勪欢(u-checkbox-group)
+ // 鎷夊彇鐖剁粍浠舵柊鐨勫彉鍖栧悗鐨勫弬鏁�
+ parentData() {
+ return [this.value, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
+ this.iconSize, this.borderBottom, this.placement
+ ]
+ },
+ bemClass() {
+ // this.bem涓轰竴涓猚omputed鍙橀噺锛屽湪mixin涓�
+ return this.bem('checkbox-group', ['placement'])
+ },
+ },
+ watch: {
+ // 褰撶埗缁勪欢闇�瑕佸瓙缁勪欢闇�瑕佸叡浜殑鍙傛暟鍙戠敓浜嗗彉鍖栵紝鎵嬪姩閫氱煡瀛愮粍浠�
+ parentData() {
+ if (this.children.length) {
+ this.children.map(child => {
+ // 鍒ゆ柇瀛愮粍浠�(u-checkbox)濡傛灉鏈塱nit鏂规硶鐨勮瘽锛屽氨灏辨墽琛�(鎵ц鐨勭粨鏋滄槸瀛愮粍浠堕噸鏂颁粠鐖剁粍浠舵媺鍙栦簡鏈�鏂扮殑鍊�)
+ typeof(child.init) === 'function' && child.init()
+ })
+ }
+ },
+ },
+ data() {
+ return {
+
+ }
+ },
+ created() {
+ this.children = []
+ },
+ methods: {
+ // 灏嗗叾浠栫殑checkbox璁剧疆涓烘湭閫変腑鐨勭姸鎬�
+ unCheckedOther(childInstance) {
+ const values = []
+ this.children.map(child => {
+ // 灏嗚閫変腑鐨刢heckbox锛屾斁鍒版暟缁勪腑杩斿洖
+ if (child.isChecked) {
+ values.push(child.name)
+ }
+ })
+ // 鍙戝嚭浜嬩欢
+ this.$emit('change', values)
+ // 淇敼閫氳繃v-model缁戝畾鐨勫��
+ this.$emit('input', values)
+ },
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-checkbox-group {
+
+ &--row {
+ @include flex;
+ }
+
+ &--column {
+ @include flex(column);
+ }
+ }
+</style>
--
Gitblit v1.9.3