blame | history | patch | commit | commitdiff | ignore whitespace
shuishen
2023-01-11 dee394d6425c2fe0e9631f3586dcae13db1df79e 
 src/components/select/index.vue


@@ -1,17 +1,26 @@


<template>


    <div class="selects-container">


        <!-- 选择框 -->


        <div :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }" class="selects-box"


            @click="optionsShow = !optionsShow">


        <div


            :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }"


            class="selects-box"


            @click="optionsShow = !optionsShow"


        >


            <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"


            :style="{ height: 35 * options.length + 'px' }"


        >


            <!-- 下拉框 -->


            <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>


@@ -46,7 +55,6 @@


        //点击换文字的方法


        cutValue (item, index) {


            this.optionsShow = true




            this.$emit("selectCheck", item, index)


        }


    }


@@ -66,8 +74,8 @@




//点击时改变选择框的边框颜色


.selects-box-show {


    border: 1px solid rgba(0, 246, 255, .5);


    box-shadow: inset 0 0 6px rgba(0, 246, 255, .5);


    border: 1px solid rgba(0, 246, 255, 0.5);


    box-shadow: inset 0 0 6px rgba(0, 246, 255, 0.5);


}




//恢复边框颜色


@@ -124,7 +132,7 @@




        //鼠标移到下拉框时的背景


        div:hover {


            background: rgba(45,92,200, 0.8);


            background: rgba(45, 92, 200, 0.8);


            color: white;


        }