定制 select 標簽的設計非常困難。有時候，如果不使用樣式化的 div 和自定義 JavaScript 的結合來構建自己的腳本，那是不可能的。在本文中，你將學習如何構建使用完全自定義 css 設置樣式的 vue.js 組件。
html
<template> <div class="custom-select" :tabindex="tabindex" @blur="open = false" > <div class="selected" :class="{open: open}" @click="open = !open" > {{ selected }} </div> <div class="items" :class="{selectHide: !open}" > <div class="item" v-for="(option, i) of options" :key="i" @click="selected=option; open=false; $emit('input', option)" > {{ option }} </div> </div> </div> </template>需要注意以下幾點：
- tabindex 屬性使我們的組件能夠得到焦點，從而使它變得模糊。當用戶在組件外部單擊時，blur 事件將關閉我們的組件。
- input 參數發出選定的選項，父組件可以輕松地對更改做出反應。
JavaScript
<script> export default { props:{ options:{ type: Array, required: true }, tabindex:{ type: Number, required: false, default: 0 } }, data() { return { selected: this.options.length > 0 ? this.options[0] : null, open: false }; }, mounted(){ this.$emit('input', this.selected); } }; </script>另外，要注意的重要事項：
我們還會在 mount 上發出選定的值，以便父級不需要顯式設置默認值。如果我們的 select 組件是較大表單的一部分，那么我們希望能夠設置正確的 tabindex 。
電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
css
<style scoped> .custom-select { position: relative; width: 100%; text-align: left; outline: none; height: 47px; line-height: 47px; } .selected { background-color: #080D0E; border-radius: 6px; border: 1px solid #858586; color: #ffffff; padding-left: 8px; cursor: pointer; user-select: none; } .selected.open{ border: 1px solid #CE9B2C; border-radius: 6px 6px 0px 0px; } .selected:after { position: absolute; content: ""; top: 22px; right: 10px; width: 0; height: 0; border: 4px solid transparent; border-color: #fff transparent transparent transparent; } .items { color: #ffffff; border-radius: 0px 0px 6px 6px; overflow: hidden; border-right: 1px solid #CE9B2C; border-left: 1px solid #CE9B2C; border-bottom: 1px solid #CE9B2C; position: absolute; background-color: #080D0E; left: 0; right: 0; } .item{ color: #ffffff; padding-left: 8px; cursor: pointer; user-select: none; } .item:hover{ background-color: #B68A28; } .selectHide { display: none; } </style>該 CSS只是一個示例，你可以按照你的需求隨意修改樣式。