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-dropdown-item/u-dropdown-item.vue | 132 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 132 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-dropdown-item/u-dropdown-item.vue b/uview-ui/components/u-dropdown-item/u-dropdown-item.vue
new file mode 100644
index 0000000..6ccf217
--- /dev/null
+++ b/uview-ui/components/u-dropdown-item/u-dropdown-item.vue
@@ -0,0 +1,132 @@
+<template>
+ <view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent="() => {}" @tap.stop.prevent="() => {}">
+ <block v-if="!$slots.default && !$slots.$default">
+ <scroll-view scroll-y="true" :style="{
+ height: $u.addUnit(height)
+ }">
+ <view class="u-dropdown-item__options">
+ <u-cell-group>
+ <u-cell-item @click="cellClick(item.value)" :arrow="false" :title="item.label" v-for="(item, index) in options"
+ :key="index" :title-style="{
+ color: value == item.value ? activeColor : inactiveColor
+ }">
+ <u-icon v-if="value == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon>
+ </u-cell-item>
+ </u-cell-group>
+ </view>
+ </scroll-view>
+ </block>
+ <slot v-else />
+ </view>
+</template>
+
+<script>
+ /**
+ * dropdown-item 涓嬫媺鑿滃崟
+ * @description 璇ョ粍浠朵竴鑸敤浜庡悜涓嬪睍寮�鑿滃崟锛屽悓鏃跺彲鍒囨崲澶氫釜閫夐」鍗＄殑鍦烘櫙
+ * @tutorial http://uviewui.com/components/dropdown.html
+ * @property {String | Number} v-model 鍙屽悜缁戝畾閫夐」鍗￠�夋嫨鍊�
+ * @property {String} title 鑿滃崟椤规爣棰�
+ * @property {Array[Object]} options 閫夐」鏁版嵁锛屽鏋滀紶鍏ヤ簡榛樿slot锛屾鍙傛暟鏃犳晥
+ * @property {Boolean} disabled 鏄惁绂佺敤姝ら�夐」鍗★紙榛樿false锛�
+ * @property {String | Number} duration 閫夐」鍗″睍寮�鍜屾敹璧风殑杩囨浮鏃堕棿锛屽崟浣峬s锛堥粯璁�300锛�
+ * @property {String | Number} height 寮圭獥涓嬫媺鍐呭鐨勯珮搴�(鍐呭瓒呭嚭灏嗕細婊氬姩)锛堥粯璁uto锛�
+ * @example <u-dropdown-item title="鏍囬"></u-dropdown-item>
+ */
+ export default {
+ name: 'u-dropdown-item',
+ props: {
+ // 褰撳墠閫変腑椤圭殑value鍊�
+ value: {
+ type: [Number, String, Array],
+ default: ''
+ },
+ // 鑿滃崟椤规爣棰�
+ title: {
+ type: [String, Number],
+ default: ''
+ },
+ // 閫夐」鏁版嵁锛屽鏋滀紶鍏ヤ簡榛樿slot锛屾鍙傛暟鏃犳晥
+ options: {
+ type: Array,
+ default () {
+ return []
+ }
+ },
+ // 鏄惁绂佺敤姝よ彍鍗曢」
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ // 涓嬫媺寮圭獥鐨勯珮搴�
+ height: {
+ type: [Number, String],
+ default: 'auto'
+ },
+ },
+ data() {
+ return {
+ active: false, // 褰撳墠椤规槸鍚﹀浜庡睍寮�鐘舵��
+ activeColor: '#497bff', // 婵�娲绘椂宸﹁竟鏂囧瓧鍜屽彸杈瑰鍕惧浘鏍囩殑棰滆壊
+ inactiveColor: '#606266', // 鏈縺娲绘椂宸﹁竟鏂囧瓧鍜屽彸杈瑰鍕惧浘鏍囩殑棰滆壊
+ }
+ },
+ computed: {
+ // 鐩戝惉props鏄惁鍙戠敓浜嗗彉鍖栵紝鏈変簺鍊奸渶瑕佷紶閫掔粰鐖剁粍浠秛-dropdown锛屾棤娉曞弻鍚戠粦瀹�
+ propsChange() {
+ return `${this.title}-${this.disabled}`;
+ }
+ },
+ watch: {
+ propsChange(n) {
+ // 褰撳�煎彉鍖栨椂锛岄�氱煡鐖剁粍浠堕噸鏂板垵濮嬪寲锛岃鐖剁粍浠舵墽琛屾瘡涓瓙缁勪欢鐨刬nit()鏂规硶
+ // 灏嗘墍鏈夊瓙缁勪欢鏁版嵁閲嶆柊鏁寸悊涓�閬�
+ if (this.parent) this.parent.init();
+ }
+ },
+ created() {
+ // 鐖剁粍浠剁殑瀹炰緥
+ this.parent = false;
+ },
+ methods: {
+ init() {
+ // 鑾峰彇鐖剁粍浠秛-dropdown
+ let parent = this.$u.$parent.call(this, 'u-dropdown');
+ if (parent) {
+ this.parent = parent;
+ // 灏嗗瓙缁勪欢鐨勬縺娲婚鑹查厤缃负鐖剁粍浠惰缃殑婵�娲诲拰鏈縺娲绘椂鐨勯鑹�
+ this.activeColor = parent.activeColor;
+ this.inactiveColor = parent.inactiveColor;
+ // 灏嗘湰缁勪欢鐨則his锛屾斁鍏ュ埌鐖剁粍浠剁殑children鏁扮粍涓紝璁╃埗缁勪欢鍙互鎿嶄綔鏈�(瀛�)缁勪欢鐨勬柟娉曞拰灞炴��
+ // push杩涘幓鍓嶏紝鏄惧垽鏂槸鍚﹀凡缁忓瓨鍦ㄤ簡鏈疄渚嬶紝鍥犱负鍦ㄥ瓙缁勪欢鍐呴儴鏁版嵁鍙樺寲鏃讹紝浼氶�氳繃鐖剁粍浠堕噸鏂板垵濮嬪寲瀛愮粍浠�
+ let exist = parent.children.find(val => {
+ return this === val;
+ })
+ if (!exist) parent.children.push(this);
+ if (parent.children.length == 1) this.active = true;
+ // 鐖剁粍浠舵棤娉曠洃鍚琧hildren鐨勫彉鍖栵紝鏁呭皢瀛愮粍浠剁殑title锛屼紶鍏ョ埗缁勪欢鐨刴enuList鏁扮粍涓�
+ parent.menuList.push({
+ title: this.title,
+ disabled: this.disabled
+ });
+ }
+ },
+ // cell琚偣鍑�
+ cellClick(value) {
+ // 淇敼閫氳繃v-model缁戝畾鐨勫��
+ this.$emit('input', value);
+ // 閫氱煡鐖剁粍浠�(u-dropdown)鏀惰捣鑿滃崟
+ this.parent.close();
+ // 鍙戝嚭浜嬩欢锛屾姏鍑哄綋鍓嶅嬀閫夐」鐨剉alue
+ this.$emit('change', value);
+ }
+ },
+ mounted() {
+ this.init();
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ @import "../../libs/css/style.components.scss";
+</style>
--
Gitblit v1.9.3