init

zhangmeng

2024-04-19 e3ba120cb766a17e098e58d11c39ffc600a3070c

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)
                    }
                })
            },
            // »ñÈ¡±êÇ©µÄ³ß´çλÖÃ
            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>