首页自定义下拉

shuishen

2022-09-23 a665bc0e1044bcad4638e8ad5c13af695f4a06ee

 src/components/select/index.vue

@@ -2,25 +2,25 @@
    <div class="selects-container">
        <!-- 选择框 -->
        <div
            :class="{ 'selects-box-show': !isshow, 'selects-box-hide': isshow }"
            class="selects0"
            @click="isshow = !isshow"
            :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }"
            class="selects-box"
            @click="optionsShow = !optionsShow"
        >
            <p v-text="xz"></p>
            <div class="text" v-text="checkValue"></div>
            <i class="el-icon-arrow-down"></i>
        </div>
        <!-- 下拉框大盒子 -->
        <div
            :class="{ show: !isshow, hade: isshow, issel: num >= 4 }"
            class="sel"
            :style="{ height: 35 * num + 'px' }"
            :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options"
            :style="{ height: 35 * options.length + 'px' }"
        >
            <!-- 下拉框 -->
            <div
                @click="cutValue(i)"
                :style="{ display: num >= i + 1 ? 'block' : 'none' }"
                v-for="(item, i) in num"
                :key="i"
                v-text="sel[i]"
                @click="cutValue(item, index)"
                v-for="(item, index) in options"
                :key="index"
                v-text="item.name"
            ></div>
        </div>
    </div>
@@ -30,29 +30,30 @@
export default {
    name: 'mapSelect',
    props: {
        //显示多少个下拉框
        num: {
            type: Number,
            required: true //必传
        },
        //下拉框显示的数据
        sel: {
        options: {
            type: Array,
            required: true //必传
        },

        checkValue: {
            type: String,
            required: true //必传
        }
    },

    data () {
        return {
            isshow: true, //控制下拉框显示及隐藏
            xz: "请选择" //默认展示的内容
            optionsShow: true, //控制下拉框显示及隐藏
        }
    },

    methods: {
        //点击换文字的方法
        cutValue (val) {
            this.isshow = true
            this.xz = this.sel[val] //拿到父组件传来的数据
            this.$emit("va", val, this.sel[val])
        cutValue (item, index) {
            this.optionsShow = true

            this.$emit("selectCheck", item, index)
        }
    }
};
@@ -60,11 +61,11 @@

<style lang="scss" scoped>
//显示下拉框
.show {
.options-box-show {
    display: block;
}
//隐藏下拉框
.hade {
.options-box-hide {
    display: none;
}
//点击时改变选择框的边框颜色
@@ -78,55 +79,63 @@
.selects-container {
    width: 100%;
    height: 100%;
    .selects0 {
    background: rgba(7, 22, 37, 0.8);

    .selects-box {
        padding: 0 10px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
        cursor: pointer;

        .text {
            flex: 1;
            text-align: left;
            line-height: 100%;
            display: inline;
            color: #666666; //默认字体颜色
            color: #fff; //默认字体颜色
            font-size: 15px; //默认字体大小
            padding-left: 10px;
        }
        img {
            margin-right: 10px;
            transform: translateY(-2px);
        }
    }

    //当下拉框数量超过4个时 使用固定高度
    .issel {
        height: 140px !important;
    }
    .sel {

    .select-options {
        width: 100%;
        height: 140px;
        overflow: auto;
        border: 1px solid #01be6e; //下拉框边框颜色
        border-top: none;

        div {
            padding: 0 10px;
            width: 100%;
            height: 35px; //下拉框高度
            display: flex;
            justify-content: space-between;
            justify-content: flex-start;
            align-items: center;
            line-height: 35px;
            padding-left: 10px;
            background: rgba(7, 22, 37, 0.8); //下拉框默认背景
            cursor: pointer;
        }

        //鼠标移到下拉框时的背景
        div:hover {
            background: rgba(17, 52, 88, 0.8);
            color: white;
        }

        .selects0:hover {
            background: white;
        }
    }

    //隐藏滚动条
    .sel::-webkit-scrollbar {
    .select-options::-webkit-scrollbar {
        display: none;
    }
}