<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="text" v-text="checkValue"></div>
|
<i class="el-icon-arrow-down"></i>
|
</div>
|
<!-- 下拉框大盒子 -->
|
<div :class="{ 'options-box-show': !optionsShow && options.length, '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>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'mapSelect',
|
props: {
|
//下拉框显示的数据
|
options: {
|
type: Array,
|
required: true //必传
|
},
|
|
checkValue: {
|
type: String,
|
required: true //必传
|
},
|
|
optionsName: {
|
type: String,
|
},
|
|
selectAllClass: {
|
type: Boolean,
|
required: false,
|
default: false
|
}
|
},
|
|
data () {
|
return {
|
optionsShow: true, //控制下拉框显示及隐藏
|
}
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
//点击换文字的方法
|
cutValue (item, index) {
|
this.optionsShow = true
|
this.$emit("selectCheck", item, index)
|
},
|
selectClick () {
|
console.log(this.selectAllClass, this.options.length)
|
if (this.selectAllClass == true) return
|
this.optionsShow = !this.optionsShow
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
//显示下拉框
|
.options-box-show {
|
display: block !important;
|
}
|
|
//隐藏下拉框
|
.options-box-hide {
|
display: none !important;
|
}
|
|
//点击时改变选择框的边框颜色
|
.selects-box-show {
|
border: 1px solid rgba(0, 246, 255, 0.5);
|
box-shadow: inset 0 0 6px rgba(0, 246, 255, 0.5);
|
}
|
|
//恢复边框颜色
|
.selects-box-hide {
|
border: 1px solid rgba(20, 50, 123, 1);
|
}
|
|
.select-choosable {
|
cursor: not-allowed !important;
|
}
|
|
.selects-container {
|
width: 100%;
|
height: 100%;
|
background: $select-box-bg-color;
|
|
.selects-box {
|
padding: 0 10px;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
cursor: pointer;
|
|
.text {
|
flex: 1;
|
text-align: left;
|
line-height: 100%;
|
color: #fff; //默认字体颜色
|
font-size: 15px; //默认字体大小
|
}
|
}
|
|
//当下拉框数量超过4个时 使用固定高度
|
.issel {
|
max-height: 140px !important;
|
}
|
|
.select-options {
|
display: none;
|
width: 100%;
|
max-height: 140px;
|
overflow: auto;
|
border: 1px solid rgba(20, 50, 123, 1); //下拉框边框颜色
|
border-top: none;
|
|
div {
|
padding: 0 10px;
|
width: 100%;
|
height: 35px; //下拉框高度
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
line-height: 35px;
|
background: rgba(35, 50, 167, 0.7); //下拉框默认背景
|
cursor: pointer;
|
}
|
|
//鼠标移到下拉框时的背景
|
div:hover {
|
background: rgba(45, 92, 200, 0.8);
|
color: white;
|
}
|
|
.selects0:hover {
|
background: white;
|
}
|
}
|
|
//隐藏滚动条
|
.select-options::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
</style>
|
