gitignore

Mr.Zhang

2023-08-17 d145c704d4cdd8f6afad234d2c2914475bb4db7f

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template> 
  <view class="u-drawdown"> 
    <view 
      class="u-dropdown__menu" 
      :style="{ 
                height: $u.addUnit(height) 
            }" 
      ref="u-dropdown__menu" 
    > 
      <view 
        class="u-dropdown__menu__item" 
        v-for="(item, index) in menuList" 
        :key="index" 
        @tap.stop="clickHandler(item, index)" 
      > 
        <view class="u-dropdown__menu__item__content"> 
          <text 
            class="u-dropdown__menu__item__content__text" 
            :style="[index === current ? activeStyle : inactiveStyle]" 
          >{{item.title}}</text> 
          <view 
            class="u-dropdown__menu__item__content__arrow" 
            :class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']" 
          > 
            <u-icon 
              :name="menuIcon" 
              :size="$u.addUnit(menuIconSize)" 
            ></u-icon> 
          </view> 
        </view> 
      </view> 
    </view> 
    <view class="u-dropdown__content"> 
      <slot /> 
    </view> 
  </view> 
</template> 
 
<script> 
import props from './props.js'; 
/** 
 * Dropdown 
 * @description 
 * @tutorial url 
 * @property {String} 
 * @event {Function} 
 * @example 
 */ 
export default { 
  name: 'u-dropdown', 
  mixins: [uni.$u.mixin, props], 
  data() { 
    return { 
      // �˵����� 
      menuList: [], 
      current: 0 
    } 
  }, 
  computed: { 
   
  }, 
  created() { 
    // �������������(u-dropdown-item)��this��������data������������������΢��С��������ѭ�����ö����� 
    this.children = []; 
  }, 
  methods: { 
    clickHandler(item, index) { 
      this.children.map(child => { 
        if(child.title === item.title) { 
          // this.queryRect('u-dropdown__menu').then(size => { 
          child.$emit('click') 
          child.setContentAnimate(child.show ? 0 : 300) 
          child.show = !child.show 
          // }) 
        } else { 
          child.show = false 
          child.setContentAnimate(0) 
        } 
      }) 
    }, 
    // ��ȡ��ǩ�ijߴ�λ�� 
    queryRect(el) { 
      // #ifndef APP-NVUE 
      // $uGetRectΪuView�Դ��Ľڵ��ѯ�򻯷���������ĵ����ܣ�https://www.uviewui.com/js/getRect.html 
      // ����ڲ�һ����this.$uGetRect�������Ϊthis.$u.getRect�����߹���һ�£����Ʋ�ͬ 
      return new Promise(resolve => { 
        this.$uGetRect(`.${el}`).then(size => { 
          resolve(size) 
        }) 
      }) 
      // #endif 
       
      // #ifdef APP-NVUE 
      // nvue�£�ʹ��domģ���ѯԪ�ظ߶� 
      // ����һ��promise���õ��ô˷�����������ʹ��then�ص� 
      return new Promise(resolve => { 
        dom.getComponentRect(this.$refs[el], res => { 
          resolve(res.size) 
        }) 
      }) 
      // #endif 
    }, 
  }, 
} 
</script> 
 
<style lang="scss"> 
@import '../../libs/css/components.scss'; 
 
.u-dropdown { 
   
  &__menu { 
    @include flex; 
     
    &__item { 
      flex: 1; 
      @include flex; 
      justify-content: center; 
       
      &__content { 
        @include flex; 
        align-items: center; 
      } 
    } 
  } 
} 
</style>