vue的实现自定义下拉select样式

最新推荐文章于 2025-07-04 17:11:35 发布

西柚~

最新推荐文章于 2025-07-04 17:11:35 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/weixin_42892407/article/details/102561238

html 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Vue项目中自定义下拉选择框（Select）的样式，通过使用组件化思维和CSS样式控制，实现与主题风格统一的下拉列表效果。详细讲解了关键步骤和注意事项。

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

  <template>
                <div class="select">
                    <div class="select-head c-row a-c j-b"  v-on:click="changeSiteTitle()">
                        <span class="select-head-cont" >{{condition}}</span>                   
                        <img class="selct-img" src="./img/select.png">
                    </div>
                    <ul class="option"  v-show="option">
                        <li class="option-item  c-row a-c" v-for="item in siteList" v-on:click="changeSite(item)">            
                        {{item.siteName}}</li>
                    </ul>
                </div>
        </template>

//css样式
.select {
    margin-top: .32rem;
    padding: 0 .25rem;
    width: 6.9rem;
    height: .8rem;
    color: #666666;
    font-size: .3rem;
    background-color: #f2f2f2;
}

.selct-img {
    width: .21rem;
    height: .11rem;
}

.select {
    position: relative;
    font-size: .30rem;
}

.select-head {
    /* overflow: hidden; */
    height: .8rem;
    color: #202020;
    box-sizing: border-box;
    line-height: .8rem;
}

.select-head .select-head-cont {
    float: left;
    padding-right: 10px;
}

.select:hover .option {
    display: block;
}

.option {
    position: absolute;
    left: 0;
    color: #63666E;
    background: #FFFFFF;
    line-height: 25px;
    display: none;
    z-index: 20000;
    box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.09);
    text-align: left;
}

.option-item {
    border-bottom: .5px solid rgba(197, 197, 197, 0.27);
    width: 6.9rem;
    padding: 0 .25rem;
    height: .8rem;
}

.option-item:last-child {
    border: none;
}
//js
var app = new Vue({
    el: "#app",
    data: {
        option: false,
        condition: "按月筛选",
        siteList: [{ 

                siteName:   "按月筛选"
            }, { 

                siteName:   "按季筛选"
            },
            { 

                siteName:   "按年筛选"
            }
        ],


    },
    methods: {
        changeSite(e) {
            console.log(e.siteName)

            this.condition = e.siteName
            this.option = false;
        },
        changeSiteTitle() {
            this.option = !this.option

        }


    }
})