vue 自定義select下拉框

根據設計需求，寫了一個自定義的下拉框，主要分上下兩部分

 

 

先對界面進行布局，主要是分上下兩部分

子組件代碼：

//上半部分
<div class="lay-select">
            <img class="lay-img" :src="curimg" />
            <label class="lay-title">{{ curtext }}</label>
            <div class="lay-triangle"></div>
        </div>
//下半部分
        <div class="lay-detailed" v-show="seldetailed">
            <div
                class="detailed-content"
                v-for="(item, index) in listData"
                :key="index"
            >
                <img class="delete-img" :src="item.img" />
                <label class="detailed-number">{{ item.lab }}</label>
            </div>
            <div>
                <p class="detailed-number">其他</p>
            </div>
        </div>

然后js部分

 return {
            seldetailed: false,  //先將下拉框隱藏
        };

   methods: {

         selectClick() {

            this.seldetailed = !this.seldetailed; //點擊顯示或隱藏下拉框

        },

}，

 

 props: {

        avatar: {

            type: String,

            default: "",

        },

        text: {

            type: String,

            default: "",

        },

        item: {

            type: Object,

            default: function() {

                return {};

            },

        },

        listData: {

            type: Array,

            default: function() {

                return [];

            },

        },

    },

 

css樣式部分

style scoped lang="scss">
.lay-img {
    width: 100px;
    height: 1px;
    float: left;
    margin: 9px 0 0 6px;
}
.lay-select {
    width: 240px;
    height: 20px;
    display: inline-block;
    background: #323b4c;
    border-radius: 1px;
    margin: 0px 0px -2px 8px;
    cursor: pointer;
    .lay-title {
        font-size: 12px;
        color: #ffffff;
        display: block;
        text-align: left;
        margin-left: 10px;
        float: left;
    }
    .lay-triangle {
        border: 8px solid transparent;
        border-top: 10px white solid;
        width: 0px;
        height: 0px;
        display: inline-block;
        float: right;
        margin: 6px 12px 0 0px;
    }
}
.lay-detailed {
    width: 306px;
    position: absolute;
    background: #454f61;
    z-index: 1;
    .detailed-number {
        font-size: 14px;
        text-align: center;
    }
    .delete-img {
        width: 84%;
        height: 6px;
        margin: 0 4px 0 10px;
    }
    .detailed-content {
        width: 306px;
        margin-top: 20px;
        cursor: pointer;
    }
}
</style>

 

然后在父組件引用

 <Layer
            v-for="(item, index) in dataList"
            :text="item.text"
            :avatar="
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3330880565,1498738947&fm=26&gp=0.jpg'
            "
            :item="item"
            :key="index"
            :listData="item.listData"
        />


  //綁定數據
  dataList: [
                {
                    img: "",
                    text: "lay1",
                    listData: [
                        {
                            id: 1,
                            img:
                                "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3735306676,1718844686&fm=26&gp=0.jpg",
                            lab: "0.5",
                        },
                        {
                            id: 2,
                            img:
                                "https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg",
                            lab: "0.3",
                        },
                        {
                            id: 3,
                            img:
                                "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3735306676,1718844686&fm=26&gp=0.jpg",
                            lab: "1.0",
                        },
                    ],
                },
                {
                    img: "",
                    text: "lay2",
                    listData: [
                        {
                            id: 4,
                            img:
                                "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3735306676,1718844686&fm=26&gp=0.jpg",
                            lab: "",
                        },
                        {
                            id: 5,
                            img:
                                "https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg",
                            lab: "",
                        },
                        {
                            id: 6,
                            img:
                                "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3735306676,1718844686&fm=26&gp=0.jpg",
                            lab: "",
                        },
                    ],
                },
               
                },
            ],

 

這里的datalist里面的listdata綁定這塊，我當時試了很久，最后才發現一段代碼就搞定了，只需要 :listData="item.listData"  就可以了，因為listdata里面的某一項數據，就是datalist的某一項數據。

 

然后就需要些一個點擊事件，獲取某一項下拉框的數據：這個點擊事件在子組件操作即可。

先在return里面定義一個歷史的text數據，設置為空，然后在mounted（數據第一次加載的時候），獲取到下拉框的第一條數據，最后在將點擊的數據傳到剛剛return里面定義的歷史數據上面。

 return {
            seldetailed: false,
            curimg: ""，
        };



  mounted() {
    //這里需要對listdata數據進行長度判斷，要不然當長度為0的時候，會報錯
        if (this.listData.length > 0) {
            this.curimg = this.listData[0].img;   //這里是listdata的第一條數據就賦給了curimg
 }
              
    },

 selectName(item) {
            this.curimg = item.img;this.seldetailed = false;
        },

然后在界面進行綁定

 

 

 

這樣子一個完整的下拉框組件就完成了。