guanqb
2023-04-02 83c41fcacfb07b7bddffb01510867d6c0b502f8e
src/components/select/index.vue
@@ -1,26 +1,16 @@
<template>
    <div class="selects-container">
        <!-- 选择框 -->
        <div
            :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow, 'select-choosable': selectAllClass }"
            class="selects-box"
            @click="selectClick"
        >
        <div :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow, 'select-choosable': selectAllClass }"
            class="selects-box" @click="selectClick">
            <div class="text" v-text="checkValue"></div>
            <i class="el-icon-arrow-down"></i>
        </div>
        <!-- 下拉框大盒子 -->
        <div
            :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options"
            :style="{ height: 35 * options.length + 'px' }"
        >
        <div :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options">
            <!-- 下拉框 -->
            <div
                @click="cutValue(item, index)"
                v-for="(item, index) in options"
                :key="index"
            >{{ item[optionsName] }}</div>
            <div @click="cutValue(item, index)" v-for="(item, index) in options" :key="index">{{ item[optionsName] }}</div>
        </div>
    </div>
</template>
@@ -126,12 +116,12 @@
    //当下拉框数量超过4个时 使用固定高度
    .issel {
        height: 140px !important;
        max-height: 140px !important;
    }
    .select-options {
        width: 100%;
        height: 140px;
        max-height: 140px;
        overflow: auto;
        border: 1px solid rgba(20, 50, 123, 1); //下拉框边框颜色
        border-top: none;