【uni-app】フレームのセットをカスタマイズします.

概要
選択ボックスをドロップダウンして、v-modelによって結合されたドロップダウン配列によって選択された値を選択します.ユーザー定義のドロップダウンをサポートし、指定された内容を出力します.
デモ
ソースコード:https://github.com/yapeee/uni...
基本的な使い方

    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()
            }
        }
    }

属性の説明
DropdownItem Props
パラメータ
説明
タイプ
標準値
value
現在選択されているアイテムに対応するvalueは、v-model双方向に結合できます.
number、String、Object
を選択します.
リスト
オプション配列
Option[]
[]
title
カスタムタイトル
String
$uni-color-primary
Optionデータ構造
キーの名前
説明
タイプ
テキスト
テキスト
ストリングス
value
識別子
string、number、Object
方法の説明
refでDropdownItemコンポーネントの呼び出し方法を取得します.
メソッドの名前
説明
chose
出力value
close Popp
ドロップダウンを閉じる
方案を実現する
ドロップダウン効果を実現します.
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')を通じてDropdown Menuコンポーネントの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方法(ドロップダウン枠を閉じる)を呼び出して、ユーザー定義のドロップダウンコンテンツを実現する.