前端小白篇之select和option樣式修改

本文主要介紹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>