本文主要介绍select和option样式"太丑"的解决方案,本文主要是通过vue实现的DOM截点的操作,如非vue需用相关语法的方式获取对应的参数方法。
一、业务场景
1.1 顶栏或横向导航需要一个下拉框,虽然select样式可以改动,但是option是固定的宽度,导致select显示占位有违和。
1.2 解决方案是通过ul-li的形式替换,可以自适应UI的设计
二、案例展示
三、相关代码
<template>
<div class="active-nav-wrapper">
<div class="nav">
<div class="nav-item" @click="getMousePos('site')" ref="site">
<span v-text="site"></span>
<img class="down-icon" src="../assets/imgs/down_icon.png" />
</div>
<div class="nav-item" ref="type" @click="getMousePos('type')">
<span v-text="type"></span>
<img class="down-icon" src="../assets/imgs/down_icon.png" />
</div>
</div>
<ul class="select-wrapper" :style="{ left: selectLeft + 'px' }" v-if="showSelect">
<li
class="select-item"
:class="{'active':item == site||item == type}"
v-for="(item,index) in selectList"
:key="index"
v-text="item"
@click="changeSelect(item)"
></li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
siteList: [],
typeList: [],
selectList: [],
site: "",
type: "",
currentId: 0,
showSelect: false,
currentSelect: "",
};
},
methods: {
getMousePos(type) {
this.currentSelect = type;
if (this.currentSelect == "site") {
this.selectList = this.siteList;
} else {
this.selectList = this.typeList;
}
this.selectLeft = this.$refs[type].offsetLeft;
this.showSelect = true;
},
changeSelect(item) {
if (this.currentSelect == "site") {
this.site = item;
} else {
this.type = item;
}
this.showSelect = false;
this.refresh();
}
}
}
</script>
<style scoped lang="less">
.select-wrapper {
cursor: pointer;
position: absolute;
left: 195px;
top: 83px;
font-size: 14px;
font-weight: 400;
color: rgba(51, 51, 51, 1);
text-align: left;
box-sizing: border-box;
background-color: #fff;
border: 1px solid rgba(221, 221, 221, 1);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
.select-item {
height: 50px;
font-size: 14px;
line-height: 50px;
padding: 0 13px;
background-color: #fff;
}
.active {
background: rgba(243, 243, 243, 1);
}
}
</style>