【uni-app】自定義下拉框組件

簡介

下拉選擇框，經過v-model綁定下拉數組選中值。支持自定義下拉內容，輸出指定內容。

demo

源碼：https://github.com/yapeee/uni...

基礎用法

<template>
    <view>
        <ms-dropdown-menu>
            <ms-dropdown-item v-model="value1" :list="list"></ms-dropdown-item>
            <ms-dropdown-item v-model="value2" :list="list"></ms-dropdown-item>
            <ms-dropdown-item v-model="value3" :hasSlot="true" title="自定義下拉框內容" ref="dropdownItem">
                <view class="dropdown-item-content">
                    <view>=====此爲測試內容=====</view>
                    <view class="btn" @click="choose">輸出：test</view>
                    <view class="btn" @click="close">關閉</view>
                </view>
            </ms-dropdown-item>
        </ms-dropdown-menu>
        <view>輸出：{{value1}}</view>
        <view>輸出：{{value2}}</view>
        <view>輸出：{{value3}}</view>
    </view>
</template>

<script>
    import msDropdownMenu from '@/components/dropdown-select/dropdown-menu.vue'
    import msDropdownItem from '@/components/dropdown-select/dropdown-item.vue'
    export default {
        components: {
            msDropdownMenu,
            msDropdownItem
        },
        props: {
        },
        data() {
            return {
                list: [
                    {
                        text: 'item1',
                        value: 0
                    },
                    {
                        text: 'item2',
                        value: 1
                    },
                    {
                        text: 'item3',
                        value: 2
                    }
                ],
                value1: 0,
                value2: 1,
                value3: {
                    name: 'init'
                }
            }
        },
        watch: {
        },
        mounted() {
        },
        methods: {
            choose() {
                let obj = {
                    value: {
                        test: 1,
                        name: 'test'
                    }
                }
                this.$refs.dropdownItem.choose(obj)
            },
            close() {
                this.$refs.dropdownItem.closePopup()
            }
        }
    }
</script>

屬性說明

DropdownItem Props

參數	說明	類型	默認值
value	當前選中項對應的 value，能夠經過v-model雙向綁定	number、String、Object	-
list	選項數組	Option[]	[]
title	自定義標題	String	$uni-color-primary

Option 數據結構

鍵名	說明	類型
text	文字	string
value	標識符	string、number、Object

方法說明

經過 ref 獲取DropdownItem組件調用方法

方法稱名	說明
choose	輸出value
closePopup	關閉下拉框

實現方案

實現下拉框下拉效果

1.設置下拉框樣式

/* 收起樣式 */
transform: translateY(-100%);
transition: all .3s;
/* 展開樣式 */
transform: translateY(0);
transition: all .3s;

2.設置下拉框展開收起的位置

this.getElementData('.dropdown-item__selected', (data)=>{
    this.contentTop = data[0].bottom
})

該操做是爲了設置下拉框的位置，使下拉框展開收起的動畫效果在超出下拉框位置的時候就會隱藏。從而實現真正的從菜單按鈕底部開始展開，收起結束的動畫效果。

實現多個下拉框狀況下只容許一個展開

該操做的實現主要是經過emit和on的通訊來實現的。步驟以下：
1.點擊DropdownItem組件，在展開下拉框以前，經過this.$parent.$emit('close')觸發DropdownMenu組件的close事件；
2.DropdownMenu組件經過this.$on('close', this.closeDropdown)監聽自定義事件；
3.DropdownMenu組件接收通知後，遍歷DropdownItem組件，執行DropdownItem組件的close()方法

closeDropdown() {
    this.$children.forEach(item =>{
    item.close();
    })
}

實現支持自定義下拉內容

可經過DropdownItem組件的slot插槽來實現自定義下拉框內容。經過ref定位DropdownItem組件，調用choose方法（輸出value）和closePopup方法（收起下拉框）實現自定義下拉內容。