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-radio-group/u-radio-group.vue | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 108 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-radio-group/u-radio-group.vue b/uni_modules/uview-ui/components/u-radio-group/u-radio-group.vue new file mode 100644 index 0000000..0d3c9b5 --- /dev/null +++ b/uni_modules/uview-ui/components/u-radio-group/u-radio-group.vue @@ -0,0 +1,108 @@ +<template> + <view + class="u-radio-group" + :class="bemClass" + > + <slot></slot> + </view> +</template> + +<script> + import props from './props.js'; + + /** + * radioRroup 鍗曢�夋鐖剁粍浠� + * @description 鍗曢�夋鐢ㄤ簬鏈変竴涓�夋嫨锛岀敤鎴峰彧鑳介�夋嫨鍏朵腑涓�涓殑鍦烘櫙銆傛惌閰島-radio浣跨敤 + * @tutorial https://www.uviewui.com/components/radio.html + * @property {String | Number | Boolean} value 缁戝畾鐨勫�� + * @property {Boolean} disabled 鏄惁绂佺敤鎵�鏈塺adio锛堥粯璁� false 锛� + * @property {String} shape 澶栬褰㈢姸锛宻hape-鏂瑰舰锛宑ircle-鍦嗗舰(榛樿 circle ) + * @property {String} activeColor 閫変腑鏃剁殑棰滆壊锛屽簲鐢ㄥ埌鎵�鏈夊瓙Radio缁勪欢锛堥粯璁� '#2979ff' 锛� + * @property {String} inactiveColor 鏈�変腑鐨勯鑹� (榛樿 '#c8c9cc' ) + * @property {String} name 鏍囪瘑绗� + * @property {String | Number} size 缁勪欢鏁翠綋鐨勫ぇ灏忥紝鍗曚綅px锛堥粯璁� 18 锛� + * @property {String} placement 甯冨眬鏂瑰紡锛宺ow-妯悜锛宑olumn-绾靛悜 锛堥粯璁� 'row' 锛� + * @property {String} label 鏂囨湰 + * @property {String} labelColor label鐨勯鑹� 锛堥粯璁� '#303133' 锛� + * @property {String | Number} labelSize label鐨勫瓧浣撳ぇ灏忥紝px鍗曚綅 锛堥粯璁� 14 锛� + * @property {Boolean} labelDisabled 鏄惁绂佹鐐瑰嚮鏂囨湰鎿嶄綔checkbox(榛樿 false ) + * @property {String} iconColor 鍥炬爣棰滆壊 锛堥粯璁� '#ffffff' 锛� + * @property {String | Number} iconSize 鍥炬爣鐨勫ぇ灏忥紝鍗曚綅px 锛堥粯璁� 12 锛� + * @property {Boolean} borderBottom placement涓簉ow鏃讹紝鏄惁鏄剧ず涓嬭竟妗� 锛堥粯璁� false 锛� + * @property {String} iconPlacement 鍥炬爣涓庢枃瀛楃殑瀵归綈鏂瑰紡 锛堥粯璁� 'left' 锛� + * @property {Object} customStyle 缁勪欢鐨勬牱寮忥紝瀵硅薄褰㈠紡 + * @event {Function} change 浠讳竴涓猺adio鐘舵�佸彂鐢熷彉鍖栨椂瑙﹀彂 + * @example <u-radio-group v-model="value"></u-radio-group> + */ + export default { + name: 'u-radio-group', + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + computed: { + // 杩欓噷computed鐨勫彉閲忥紝閮芥槸瀛愮粍浠秛-radio闇�瑕佺敤鍒扮殑锛岀敱浜庡ご鏉″皬绋嬪簭鐨勫吋瀹规�у樊寮傦紝瀛愮粍浠舵棤娉曞疄鏃剁洃鍚埗缁勪欢鍙傛暟鐨勫彉鍖� + // 鎵�浠ラ渶瑕佹墜鍔ㄩ�氱煡瀛愮粍浠讹紝杩欓噷杩斿洖涓�涓猵arentData鍙橀噺锛屼緵watch鐩戝惉锛屽湪鍏朵腑鍘婚�氱煡姣忎竴涓瓙缁勪欢閲嶆柊浠庣埗缁勪欢(u-radio-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('radio-group', ['placement']) + }, + }, + watch: { + // 褰撶埗缁勪欢闇�瑕佸瓙缁勪欢闇�瑕佸叡浜殑鍙傛暟鍙戠敓浜嗗彉鍖栵紝鎵嬪姩閫氱煡瀛愮粍浠� + parentData() { + if (this.children.length) { + this.children.map(child => { + // 鍒ゆ柇瀛愮粍浠�(u-radio)濡傛灉鏈塱nit鏂规硶鐨勮瘽锛屽氨灏辨墽琛�(鎵ц鐨勭粨鏋滄槸瀛愮粍浠堕噸鏂颁粠鐖剁粍浠舵媺鍙栦簡鏈�鏂扮殑鍊�) + typeof(child.init) === 'function' && child.init() + }) + } + }, + }, + data() { + return { + + } + }, + created() { + this.children = [] + }, + methods: { + // 灏嗗叾浠栫殑radio璁剧疆涓烘湭閫変腑鐨勭姸鎬� + unCheckedOther(childInstance) { + this.children.map(child => { + // 鎵�鏈夊瓙radio涓紝琚搷浣滅粍浠跺疄渚嬬殑checked鐨勫�兼棤闇�淇敼 + if (childInstance !== child) { + child.checked = false + } + }) + const { + name + } = childInstance + // 閫氳繃emit浜嬩欢锛岃缃埗缁勪欢閫氳繃v-model鍙屽悜缁戝畾鐨勫�� + this.$emit('input', name) + // 鍙戝嚭浜嬩欢 + this.$emit('change', name) + }, + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + .u-radio-group { + flex: 1; + + &--row { + @include flex; + } + + &--column { + @include flex(column); + } + } +</style> -- Gitblit v1.9.3