Vueドロップダウンリストの2つの実装方法の比較

  <el-select v-model="form.columeType" placeholder="フィールドタイプ">
           <el-option v-for="(item,index) in columeTypeArr" :key="index" :label="item.label" :value="item.value">
           </el-option>
  </el-select>

データ（）{
    戻る {
       列タイプArr:[{
            値:'文字列',
            ラベル:'文字列'
        },{
            値:'Int',
            ラベル: '整数',
        },{
            値: '10進数',
            ラベル:'数値型'
        }],
    }
}

  <el-select v-model="form.fileOrgType" placeholder="選択してください">
        <el-option ラベル="はい" 値="Y"> </el-option>
        <el-option label="いいえ" value="N"></el-option>
  </el-select>

<テンプレート>
  <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>選択した項目のテキスト<i></i></span>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>広州</li>
        </ul>
    </div>
</テンプレート>

<スタイル スコープ lang="scss">
    .zq-ドロップリスト{
        表示: インラインブロック;
        最小幅: 100px;
        位置: 相対的;
        スパン{
            表示: ブロック;
            高さ: 30px;
            行の高さ: 30px;
            背景: #f1f1f1;
            フォントサイズ: 14px;
            テキスト配置: 中央;
            色: #333333;
            境界線の半径: 4px;
            私{
                背景: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) 繰り返しなし 中央 中央;
                左マージン: 6px;
                表示: インラインブロック;
            }
        }
        ul{
            位置: 絶対;
            上: 30px;
            左: 0;
            幅: 100%;
            マージン: 0;
            パディング: 0;
            境界線: 実線 1px #f1f1f1;
            境界線の半径: 4px;
            オーバーフロー: 非表示;
            li{
                リストスタイル: なし;
                高さ: 30px;
                行の高さ: 30px;
                フォントサイズ: 14px;
                下部境界線: 実線 1px #f1f1f1;
                背景: #ffffff;
            }
            li:最後の子{
                下部境界線: なし;
            }
            li:ホバー{
                背景: #f6f6f6;
            }
        }
    }
</スタイル>

<スクリプト>
エクスポートデフォルト{
    名前: "DropDownList",
    小道具:{
        データリスト:{
            タイプ:配列、
            デフォルト（）{
                戻る [
                    {名前: "オプション 1"},
                    {名前: "オプション 2"}
                ]
            }
        },
        ラベルプロパティ:{
            タイプ:文字列、
            default(){ "name" を返す }
        }
    },
    データ（）{
        戻る {
            アクティブインデックス:0
        }
    },
}

<テンプレート>
  <div class="home">
    <ドロップリスト:dataList="dplist" labelProperty="city" @change="onDpChange($event)"></ドロップリスト>
    <p>その他のテキストコンテンツ</p>
  </div>
</テンプレート>
<スクリプト>
  '@/components/DropDownList.vue' から DropList をインポートします。
  //その他のコードは省略</script>

<テンプレート>
    <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>{{dplLable} </i></span>
        <ul>
            <li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{item[labelProperty]}}</li>
        </ul>
    </div>
</テンプレート>

計算:{
        dplLabel(){
            this.dataList[this.activeIndex][this.labelProperty] を返します
        }
    }

ディレクティブ:{
        dpl:{
            バインド(el){
                el.style.display = "なし";
            }
        }
    },

<ul v-dpl>

onDplOver(イベント){
    ul = event.currentTarget.childNodes[1]とします。
    ul.style.display = "ブロック";
},
onDplOut(イベント){
    ul = event.currentTarget.childNodes[1]とします。
    ul.style.display = "なし";
},

onLiClick(インデックス){
    let path = event.path || (event.composedPath && event.composedPath()) //Firefox および Safari と互換性あり
    パス[1].style.display = "なし";
    this.activeIndex = インデックス;
    this.$emit("change", {
        インデックス:インデックス、
        値:this.dataList[インデックス]
    })
}

<テンプレート>
    <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>{{dplLable} </i></span>
        <ul v-dpl>
            <li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{item[labelProperty]}}</li>
        </ul>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前: "DropDownList",
    データ（）{
        戻る {
            アクティブインデックス:0
        }
    },
    小道具:{
        データリスト:{
            タイプ:配列、
            デフォルト（）{
                戻る [
                    {名前: "オプション 1"},
                    {名前: "オプション 2"}
                ]
            }
        },
        ラベルプロパティ:{
            タイプ:文字列、
            default(){ "name" を返す }
        }
    },
    ディレクティブ:{
        dpl:{
            バインド(el){
                el.style.display = "なし";
            }
        }
    },
    方法:{
        onDplOver(イベント){
            ul = event.currentTarget.childNodes[1]とします。
            ul.style.display = "ブロック";
        },
        onDplOut(イベント){
            ul = event.currentTarget.childNodes[1]とします。
            ul.style.display = "なし";
        },
        onLiClick(インデックス){
            let path = event.path || (event.composedPath && event.composedPath()) //Firefox および Safari と互換性あり
            パス[1].style.display = "なし";
            this.activeIndex = インデックス;
            this.$emit("change", {
                インデックス:インデックス、
                値:this.dataList[インデックス]
            })
        }
    },
    計算:{
        dplLabel(){
            this.dataList[this.activeIndex][this.labelProperty] を返します
        }
    }
}
</スクリプト>

<スタイル スコープ lang="scss">
    .zq-ドロップリスト{
        表示: インラインブロック;
        最小幅: 100px;
        位置: 相対的;
        スパン{
            表示: ブロック;
            高さ: 30px;
            行の高さ: 30px;
            背景: #f1f1f1;
            フォントサイズ: 14px;
            テキスト配置: 中央;
            色: #333333;
            境界線の半径: 4px;
            私{
                背景: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) 繰り返しなし 中央 中央;
                左マージン: 6px;
                表示: インラインブロック;
            }
        }
        ul{
            位置: 絶対;
            上: 30px;
            左: 0;
            幅: 100%;
            マージン: 0;
            パディング: 0;
            境界線: 実線 1px #f1f1f1;
            境界線の半径: 4px;
            オーバーフロー: 非表示;
            li{
                リストスタイル: なし;
                高さ: 30px;
                行の高さ: 30px;
                フォントサイズ: 14px;
                下部境界線: 実線 1px #f1f1f1;
                背景: #ffffff;
            }
            li:最後の子{
                下部境界線: なし;
            }
            li:ホバー{
                背景: #f6f6f6;
            }
        }
    }
</スタイル>