vue自定义下拉框_vue自定义下拉框组件-优快云博客

本文介绍了一个使用Vue.js构建的下拉选择器组件，该组件支持多语言切换，通过点击头部显示当前选中的站点名称，下拉菜单包含中文和英文两个选项，每个选项都有对应的代码和名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="select">
        <div class="select-head">
            <span class="select-head-cont">{{siteTxt}}</span>
            <span class="select-icon">▼</span>
        </div>
        <ul class="option">
            <li class="option-item" v-for="item in siteList" @click="changeSite(item)">            
            {{item.siteName}}</li>
        </ul>
    </div>
</template>
export default {
    data() {
        return {
            siteList: [{
                 siteCode: "zh",
                 siteName: "中文"
               },{
                 siteCode: "en",
                 siteName: "English"
               },
            ],
            siteTxt: this.$lang.lang === 'zh' ? '中文' : 'English',
        }
    },
}，
methods: {
   changeSite(item) {
       // 做点什么。。。
   },
}
<style scoped>
.select {
    position: relative;
}
.select-head{
    overflow: hidden;
    /*width: 90px;*/
    height: 40px;
    font-size: 14px;
    color: #202020;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 40px;
}
.select-head .select-head-cont {
    float: left;
    padding-right: 10px;
}
.select-head .select-icon {
    float: right;
    color: #535AF8;
}
.select:hover .option {
    display: block;
}
.option {
    position: absolute;
    left: 0;
    font-size: 14px;
    width: 74px;
    color: #63666E;
    background: #FFFFFF;
    line-height: 25px;
    display: none;
    z-index: 20000;
    box-shadow:0px 2px 15px 0px rgba(0,0,0,0.09);
    border-radius:8px;
    padding: 10px 0;
    text-align: left;
}
.option-item {
    border-bottom: .5px solid rgba(197, 197, 197, 0.27);
    padding: 5px;
    text-indent: 8px;
}
.option-item:last-child {
    border: none;
}
.option-item:hover{
    color: #535AF8;
}
</style>