|
1 | 1 | <template> |
2 | | - <view class="u-drawdown-item"> |
3 | | - <u-overlay |
4 | | - customStyle="top: 126px" |
5 | | - :show="show" |
6 | | - :closeOnClickOverlay="closeOnClickOverlay" |
7 | | - @click="overlayClick" |
8 | | - ></u-overlay> |
9 | | - <view |
10 | | - class="u-drawdown-item__content" |
11 | | - :style="[style]" |
12 | | - :animation="animationData" |
13 | | - ref="animation" |
14 | | - > |
15 | | - <slot /> |
16 | | - </view> |
17 | | - </view> |
| 2 | + <view class="u-drawdown"> |
| 3 | + <view |
| 4 | + class="u-dropdown__menu" |
| 5 | + :style="{ |
| 6 | + height: $u.addUnit(height) |
| 7 | + }" |
| 8 | + ref="u-dropdown__menu" |
| 9 | + > |
| 10 | + <view |
| 11 | + class="u-dropdown__menu__item" |
| 12 | + v-for="(item, index) in menuList" |
| 13 | + :key="index" |
| 14 | + @tap.stop="clickHandler(item, index)" |
| 15 | + > |
| 16 | + <view class="u-dropdown__menu__item__content"> |
| 17 | + <text |
| 18 | + class="u-dropdown__menu__item__content__text" |
| 19 | + :style="[index === current ? activeStyle : inactiveStyle]" |
| 20 | + >{{item.title}}</text> |
| 21 | + <view |
| 22 | + class="u-dropdown__menu__item__content__arrow" |
| 23 | + :class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']" |
| 24 | + > |
| 25 | + <u-icon |
| 26 | + :name="menuIcon" |
| 27 | + :size="$u.addUnit(menuIconSize)" |
| 28 | + ></u-icon> |
| 29 | + </view> |
| 30 | + </view> |
| 31 | + </view> |
| 32 | + </view> |
| 33 | + <view class="u-dropdown__content"> |
| 34 | + <slot /> |
| 35 | + </view> |
| 36 | + </view> |
18 | 37 | </template> |
19 | 38 |
|
20 | 39 | <script> |
21 | | - // #ifdef APP-NVUE |
22 | | - const animation = uni.requireNativePlugin('animation') |
23 | | - const dom = uni.requireNativePlugin('dom') |
24 | | - // #endif |
25 | | - import props from './props.js'; |
26 | | - /** |
27 | | - * Drawdownitem |
28 | | - * @description |
29 | | - * @tutorial url |
30 | | - * @property {String} |
31 | | - * @event {Function} |
32 | | - * @example |
33 | | - */ |
34 | | - export default { |
35 | | - name: 'u-drawdown-item', |
36 | | - mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
37 | | - data() { |
38 | | - return { |
39 | | - show: false, |
40 | | - top: '126px', |
41 | | - // uni.createAnimation的导出数据 |
42 | | - animationData: {}, |
43 | | - } |
44 | | - }, |
45 | | - mounted() { |
46 | | - this.init() |
47 | | - }, |
48 | | - watch: { |
49 | | - // 发生变化时，需要去更新父组件对应的值 |
50 | | - dataChange(newValue, oldValue) { |
51 | | - this.updateParentData() |
52 | | - } |
53 | | - }, |
54 | | - computed: { |
55 | | - // 监听对应变量的变化 |
56 | | - dataChange() { |
57 | | - return [this.title, this.disabled] |
58 | | - }, |
59 | | - style() { |
60 | | - const style = { |
61 | | - zIndex: 10071, |
62 | | - position: 'fixed', |
63 | | - display: 'flex', |
64 | | - left: 0, |
65 | | - right: 0 |
66 | | - } |
67 | | - style.top = uni.$u.addUnit(this.top) |
68 | | - return style |
69 | | - } |
70 | | - }, |
71 | | - methods: { |
72 | | - init() { |
73 | | - this.updateParentData() |
74 | | - }, |
75 | | - // 更新父组件所需的数据 |
76 | | - updateParentData() { |
77 | | - // 获取父组件u-dropdown |
78 | | - this.getParentData('u-dropdown') |
79 | | - if (!this.parent) uni.$u.error('u-dropdown-item必须配合u-dropdown使用') |
80 | | - // 查找父组件menuList数组中对应的标题数据 |
81 | | - const menuIndex = this.parent.menuList.findIndex(item => item.title === this.title) |
82 | | - const menuContent = { |
83 | | - title: this.title, |
84 | | - disabled: this.disabled |
85 | | - } |
86 | | - if (menuIndex >= 0) { |
87 | | - // 如果能找到，则直接修改 |
88 | | - this.parent.menuList[menuIndex] = menuContent; |
89 | | - } else { |
90 | | - // 如果无法找到，则为第一次添加，直接push即可 |
91 | | - this.parent.menuList.push(menuContent); |
92 | | - } |
93 | | - }, |
94 | | - async setContentAnimate(height) { |
95 | | - this.animating = true |
96 | | - // #ifdef APP-NVUE |
97 | | - const ref = this.$refs['animation'].ref |
98 | | - animation.transition(ref, { |
99 | | - styles: { |
100 | | - height: uni.$u.addUnit(height) |
101 | | - }, |
102 | | - duration: this.duration, |
103 | | - timingFunction: 'ease-in-out', |
104 | | - }, () => { |
105 | | - this.animating = false |
106 | | - }) |
107 | | - // #endif |
108 | | - |
109 | | - // #ifndef APP-NVUE |
110 | | - const animation = uni.createAnimation({ |
111 | | - timingFunction: 'ease-in-out', |
112 | | - }); |
113 | | - animation |
114 | | - .height(height) |
115 | | - .step({ |
116 | | - duration: this.duration, |
117 | | - }) |
118 | | - .step() |
119 | | - // 导出动画数据给面板的animationData值 |
120 | | - this.animationData = animation.export() |
121 | | - // 标识动画结束 |
122 | | - uni.$u.sleep(this.duration).then(() => { |
123 | | - this.animating = false |
124 | | - }) |
125 | | - // #endif |
126 | | - }, |
127 | | - overlayClick() { |
128 | | - this.show = false |
129 | | - this.setContentAnimate(0) |
130 | | - } |
131 | | - }, |
132 | | - } |
| 40 | +import props from './props.js'; |
| 41 | +/** |
| 42 | + * Dropdown |
| 43 | + * @description |
| 44 | + * @tutorial url |
| 45 | + * @property {String} |
| 46 | + * @event {Function} |
| 47 | + * @example |
| 48 | + */ |
| 49 | +export default { |
| 50 | + name: 'u-dropdown', |
| 51 | + mixins: [uni.$u.mixin, props], |
| 52 | + data() { |
| 53 | + return { |
| 54 | + // �˵����� |
| 55 | + menuList: [], |
| 56 | + current: 0 |
| 57 | + } |
| 58 | + }, |
| 59 | + computed: { |
| 60 | + |
| 61 | + }, |
| 62 | + created() { |
| 63 | + // �������������(u-dropdown-item)��this��������data��������������������С��������ѭ�����ö����� |
| 64 | + this.children = []; |
| 65 | + }, |
| 66 | + methods: { |
| 67 | + clickHandler(item, index) { |
| 68 | + this.children.map(child => { |
| 69 | + if(child.title === item.title) { |
| 70 | + // this.queryRect('u-dropdown__menu').then(size => { |
| 71 | + child.$emit('click') |
| 72 | + child.setContentAnimate(child.show ? 0 : 300) |
| 73 | + child.show = !child.show |
| 74 | + // }) |
| 75 | + } else { |
| 76 | + child.show = false |
| 77 | + child.setContentAnimate(0) |
| 78 | + } |
| 79 | + }) |
| 80 | + }, |
| 81 | + // ��ȡ��ǩ�ijߴ�λ�� |
| 82 | + queryRect(el) { |
| 83 | + // #ifndef APP-NVUE |
| 84 | + // $uGetRectΪuView�Դ��Ľڵ��ѯ����������ĵ����ܣ�https://www.uviewui.com/js/getRect.html |
| 85 | + // ����ڲ�һ����this.$uGetRect�������Ϊthis.$u.getRect�����߹���һ�£����Ʋ�ͬ |
| 86 | + return new Promise(resolve => { |
| 87 | + this.$uGetRect(`.${el}`).then(size => { |
| 88 | + resolve(size) |
| 89 | + }) |
| 90 | + }) |
| 91 | + // #endif |
| 92 | + |
| 93 | + // #ifdef APP-NVUE |
| 94 | + // nvue�£�ʹ��domģ���ѯԪ�ظ߶� |
| 95 | + // ����һ��promise���õ��ô˷�����������ʹ��then�ص� |
| 96 | + return new Promise(resolve => { |
| 97 | + dom.getComponentRect(this.$refs[el], res => { |
| 98 | + resolve(res.size) |
| 99 | + }) |
| 100 | + }) |
| 101 | + // #endif |
| 102 | + }, |
| 103 | + }, |
| 104 | +} |
133 | 105 | </script> |
134 | 106 |
|
135 | | -<style lang="scss" scoped> |
136 | | - @import '../../libs/css/components.scss'; |
137 | | - |
138 | | - .u-drawdown-item { |
139 | | - |
140 | | - &__content { |
141 | | - background-color: #FFFFFF; |
142 | | - overflow: hidden; |
143 | | - height: 0; |
144 | | - } |
145 | | - } |
| 107 | +<style lang="scss"> |
| 108 | +@import '../../libs/css/components.scss'; |
| 109 | +
|
| 110 | +.u-dropdown { |
| 111 | + |
| 112 | + &__menu { |
| 113 | + @include flex; |
| 114 | + |
| 115 | + &__item { |
| 116 | + flex: 1; |
| 117 | + @include flex; |
| 118 | + justify-content: center; |
| 119 | + |
| 120 | + &__content { |
| 121 | + @include flex; |
| 122 | + align-items: center; |
| 123 | + } |
| 124 | + } |
| 125 | + } |
| 126 | +} |
146 | 127 | </style> |
0 commit comments