翻译语言选择自定义封装（elementUI）

基于elementUI下拉菜单项el-dropdown自定义封装

<template>
    <div>
        <el-dropdown trigger="click" @command="handleCommand" ref="dropRef">
            <el-select v-model="key1" ref="sel" @visible-change="selectClick" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="'sel'+item.key"
                :label="item.lang"
                :value="item.key">
                </el-option>
            </el-select>
            <el-dropdown-menu slot="dropdown">
                <el-input v-model="key2" suffix-icon="el-icon-search" placeholder="搜索语言"></el-input>
                <div v-show="key2" style="padding: 10px 10px 0;">
                    <ul>
                        <li v-for="(item,index) in searchList" :key="'search'+item.key">
                            <div class="list-item" @click="searchSelect(item)">
                                {{ item.lang }}
                            </div>
                        </li>
                    </ul>
                </div>
                <div v-show="!key2" class="group-content">
                    <vue-scroll :ops="ops" ref="groupRef">
                        <div class="group-list">
                            <div v-for="item in languages" :key="item.title">
                                <div ref="titleRef">{{ item.title }}</div>
                                <el-dropdown-item
                                    v-for="(lang, index) in item.list"
                                    :key="lang.key"
                                    class="sort-item"
                                    :command="lang"
                                    >
                                    <span>{{ lang.lang }}</span>
                                </el-dropdown-item>
                            </div>
                        </div>
                    </vue-scroll>
                    <div class="key-list">
                        <div v-for="item in keyList" :key="'key'+item" @click="goIndex(item)">
                            {{ item }}
                        </div>
                    </div>
                </div>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
        
</template>
      
<script>
import {langList} from './langList'
// 搜索防抖定时器
let timer
export default {
    props:{
        type:''
    },
    data() {
        return {
            // 选定后下拉项
            options:[],
            // 选定语言
            key1:'',
            // 语言搜索
            key2:'',
            keyList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
            languages:langList,
            //滚动条定义配置项
            ops: {
                vuescroll: {},
                scrollPanel: {
                    scrollingX: false,//关闭横向滚动
                },
                rail: {
                    keepShow: true,
                },
                bar: {
                    hoverStyle: true,
                    onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
                    background: "#efefef", //滚动条颜色
                    opacity: 0.8, //滚动条透明度
                },
            },
            // 搜索结果列表
            searchList:[]
        }
    },
    watch: {
        key2(val){
            if (timer) {
                clearTimeout(timer)
            }
            timer=setTimeout(()=>{
                this.getSelectList(val)
            },500)
        }
    },
    created(){
        if(this.type=='from'){
            this.handleCommand({key:'en',lang:'英语'})
        }
        if(this.type=='to'){
            this.handleCommand({key:'zh',lang:'中文(简体)'})
        }
    },
    methods:{
        goIndex(key){
            const groupRef=this.$refs.groupRef.$children[0].$el
            const titleRef=this.$refs.titleRef
            titleRef.forEach(item=>{
                if(item.innerText===key){
                    groupRef.scrollTo({
                        top:item.offsetTop,
                        behavior:'smooth'
                    })
                }
            })
        },
        handleCommand(lang){
            this.options=[{...lang}]
            this.key1=lang.key
            this.$emit('changeSelect',lang.key)
        },
        // 隐藏select下拉框
        selectClick(){
            this.$refs.sel.blur()
        },
        getSelectList(val){
            if(!val) return
            const result=[]
            langList.forEach(item=>{
                item.list.forEach(langItem=>{
                    if(langItem.lang.indexOf(val)!==-1){
                        result.push(langItem)
                    }
                })
            })
            this.searchList=result
            
        },
        searchSelect(lang){
            this.$refs.dropRef.hide()
            this.handleCommand(lang)
            this.key2=''
        }
    }
}
</script>

<style scoped lang="scss">
/* 设置选项样式 */
/* 设置弹出框的宽高 */
/deep/ .el-dropdown-menu {
    width: 800px;
    // height: 400px;
    padding: 10px;
    .sort-item {
        display: inline-block;
        width: 100px;
        padding: 0 15px;
        margin: 10px 15px 2px 0;
        line-height: 20px;
        font-size: 14px;
        color: #333333;
        text-align: center;
        cursor: pointer;
    }
    .list-item{
        color: #333;
        cursor: pointer;
        font-size: 13.5px;
        line-height: 22px;
        margin-bottom: 9px;
    }
    .group-content{
        position: relative;
        height:420px;
        margin-top: 20px;
        .group-list{
            height: 400px;
            padding-right: 20px;
        }
        .key-list{
            position: absolute;
            right: 25px;
            top: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #999;
            div{
                text-align: center;
                cursor: pointer;
            }
        }
    }
}
</style>

实现效果：