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-radio-group/u-radio-group.vue | 128 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 128 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-radio-group/u-radio-group.vue b/uview-ui/components/u-radio-group/u-radio-group.vue
new file mode 100644
index 0000000..0c91447
--- /dev/null
+++ b/uview-ui/components/u-radio-group/u-radio-group.vue
@@ -0,0 +1,128 @@
+<template>
+ <view class="u-radio-group u-clearfix">
+ <slot></slot>
+ </view>
+</template>
+
+<script>
+ import Emitter from '../../libs/util/emitter.js';
+ /**
+ * radioRroup 鍗曢�夋鐖剁粍浠�
+ * @description 鍗曢�夋鐢ㄤ簬鏈変竴涓�夋嫨锛岀敤鎴峰彧鑳介�夋嫨鍏朵腑涓�涓殑鍦烘櫙銆傛惌閰島-radio浣跨敤
+ * @tutorial https://www.uviewui.com/components/radio.html
+ * @property {Boolean} disabled 鏄惁绂佺敤鎵�鏈塺adio锛堥粯璁alse锛�
+ * @property {String Number} size 缁勪欢鏁翠綋鐨勫ぇ灏忥紝鍗曚綅rpx锛堥粯璁�40锛�
+ * @property {String} active-color 閫変腑鏃剁殑棰滆壊锛屽簲鐢ㄥ埌鎵�鏈夊瓙Radio缁勪欢锛堥粯璁�#497bff锛�
+ * @property {String Number} icon-size 鍥炬爣澶у皬锛屽崟浣峳px锛堥粯璁�20锛�
+ * @property {String} shape 澶栬褰㈢姸锛宻hape-鏂瑰舰锛宑ircle-鍦嗗舰(榛樿circle)
+ * @property {Boolean} label-disabled 鏄惁绂佹鐐瑰嚮鏂囨湰鎿嶄綔checkbox(榛樿false)
+ * @property {String} width 瀹藉害锛岄渶甯﹀崟浣�
+ * @property {Boolean} wrap 鏄惁姣忎釜radio閮芥崲琛岋紙榛樿false锛�
+ * @event {Function} change 浠讳竴涓猺adio鐘舵�佸彂鐢熷彉鍖栨椂瑙﹀彂
+ * @example <u-radio-group v-model="value"></u-radio-group>
+ */
+ export default {
+ name: "u-radio-group",
+ mixins: [Emitter],
+ props: {
+ // 鏄惁绂佺敤鎵�鏈夊崟閫夋
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ // 鍖归厤鏌愪竴涓猺adio缁勪欢锛屽鏋滄煇涓猺adio鐨刵ame鍊肩瓑浜庢鍊硷紝閭ｄ箞杩欎釜radio灏辫浼氶�変腑
+ value: {
+ type: [String, Number],
+ default: ''
+ },
+ // 閫変腑鐘舵�佷笅鐨勯鑹�
+ activeColor: {
+ type: String,
+ default: '#497bff'
+ },
+ // 缁勪欢鐨勬暣浣撳ぇ灏�
+ size: {
+ type: [String, Number],
+ default: 34
+ },
+ // 鏄惁绂佹鐐瑰嚮鎻愮ず璇�変腑澶嶉�夋
+ labelDisabled: {
+ type: Boolean,
+ default: false
+ },
+ // 褰㈢姸锛宻quare涓烘柟褰紝circle涓哄師鍨�
+ shape: {
+ type: String,
+ default: 'circle'
+ },
+ // 鍥炬爣鐨勫ぇ灏忥紝鍗曚綅rpx
+ iconSize: {
+ type: [String, Number],
+ default: 20
+ },
+ // 姣忎釜checkbox鍗爑-checkbox-group鐨勫搴�
+ width: {
+ type: [String, Number],
+ default: 'auto'
+ },
+ // 鏄惁姣忎釜checkbox閮芥崲琛�
+ wrap: {
+ type: Boolean,
+ default: false
+ }
+ },
+ created() {
+ // 濡傛灉灏哻hildren瀹氫箟鍦╠ata涓紝鍦ㄥ井淇″皬绋嬪簭浼氶�犳垚寰幆寮曠敤鑰屾姤閿�
+ this.children = [];
+ },
+ watch: {
+ // 褰撶埗缁勪欢闇�瑕佸瓙缁勪欢闇�瑕佸叡浜殑鍙傛暟鍙戠敓浜嗗彉鍖栵紝鎵嬪姩閫氱煡瀛愮粍浠�
+ parentData() {
+ if(this.children.length) {
+ this.children.map(child => {
+ // 鍒ゆ柇瀛愮粍浠�(u-radio)濡傛灉鏈塽pdateParentData鏂规硶鐨勮瘽锛屽氨灏辨墽琛�(鎵ц鐨勭粨鏋滄槸瀛愮粍浠堕噸鏂颁粠鐖剁粍浠舵媺鍙栦簡鏈�鏂扮殑鍊�)
+ typeof(child.updateParentData) == 'function' && child.updateParentData();
+ })
+ }
+ },
+ },
+ computed: {
+ // 杩欓噷computed鐨勫彉閲忥紝閮芥槸瀛愮粍浠秛-radio闇�瑕佺敤鍒扮殑锛岀敱浜庡ご鏉″皬绋嬪簭鐨勫吋瀹规�у樊寮傦紝瀛愮粍浠舵棤娉曞疄鏃剁洃鍚埗缁勪欢鍙傛暟鐨勫彉鍖�
+ // 鎵�浠ラ渶瑕佹墜鍔ㄩ�氱煡瀛愮粍浠讹紝杩欓噷杩斿洖涓�涓猵arentData鍙橀噺锛屼緵watch鐩戝惉锛屽湪鍏朵腑鍘婚�氱煡姣忎竴涓瓙缁勪欢閲嶆柊浠庣埗缁勪欢(u-radio-group)
+ // 鎷夊彇鐖剁粍浠舵柊鐨勫彉鍖栧悗鐨勫弬鏁�
+ parentData() {
+ return [this.value, this.disabled, this.activeColor, this.size, this.labelDisabled, this.shape, this.iconSize, this.width, this.wrap];
+ }
+ },
+ methods: {
+ // 璇ユ柟娉曟湁瀛愮粍浠秗adio璋冪敤锛屽綋涓�涓猺adio琚�変腑鐨勬椂鍊欙紝缁欑埗缁勪欢璁剧疆value鍊�(props浼犻�掔殑value)
+ setValue(val) {
+ // 閫氳繃瀛愮粍浠朵紶閫掕繃鏉ョ殑val鍊�(姝よ閫変腑鐨勫瓙缁勪欢鍐呴儴宸插皢parentValue璁剧疆绛変簬val鐨勫��)锛屽皢鍏朵粬
+ // u-radio璁剧疆鏈�変腑鐨勭姸鎬�
+ this.children.map(child => {
+ if(child.parentData.value != val) child.parentData.value = '';
+ })
+ // 閫氳繃emit浜嬩欢锛岃缃埗缁勪欢閫氳繃v-model鍙屽悜缁戝畾鐨勫��
+ this.$emit('input', val);
+ this.$emit('change', val);
+ // 绛夊緟涓嬩竴涓懆鏈熷啀鎵ц锛屽洜涓簍his.$emit('input')浣滅敤浜庣埗缁勪欢锛屽啀鍙嶉鍒板瓙缁勪欢鍐呴儴锛岄渶瑕佹椂闂�
+ // 鐢变簬澶存潯灏忕▼搴忔墽琛岃繜閽濓紝鏁呴渶瑕佺敤鍑犲崄姣鐨勫欢鏃�
+ setTimeout(() => {
+ // 灏嗗綋鍓嶇殑鍊煎彂閫佸埌 u-form-item 杩涜鏍￠獙
+ this.dispatch('u-form-item', 'on-form-change', val);
+ }, 60)
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-radio-group {
+ /* #ifndef MP || APP-NVUE */
+ display: inline-flex;
+ flex-wrap: wrap;
+ /* #endif */
+ }
+</style>
--
Gitblit v1.9.3