疯狂的技术宅 前端先锋
翻译：疯狂的技术宅
作者：Lane Wagner
来源：hackernoon
正文共：2337 字
预计阅读时间：7 分钟
定制 select 标签的设计非常困难。有时候，如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本，那是不可能的。在本文中，你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件。
Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd
1<template> 2 <div 3 class="custom-select" 4 :tabindex="tabindex" 5 @blur="open = false" 6 > 7 <div 8 class="selected" 9 :class="{open: open}"10 @click="open = !open"11 >12 {{ selected }}13 </div>14 <div15 class="items"16 :class="{selectHide: !open}"17 >18 <div19 class="item"20 v-for="(option, i) of options"21 :key="i"22 @click="selected=option; open=false; $emit('input', option)"23 >24 {{ option }}25 </div>26 </div>27 </div>28</template>需要注意以下几点：
- tabindex 属性使我们的组件能够得到焦点，从而使它变得模糊。当用户在组件外部单击时，blur 事件将关闭我们的组件。
- input 参数发出选定的选项，父组件可以轻松地对更改做出反应。JavaScript
1<script> 2export default { 3 props:{ 4 options:{ 5 type: Array, 6 required: true 7 }, 8 tabindex:{ 9 type: Number,10 required: false,11 default: 012 }13 },14 data() {15 return {16 selected: this.options.length > 0 ? this.options[0] : null,17 open: false18 };19 },20 mounted(){21 this.$emit('input', this.selected);22 }23};24</script>另外，要注意的重要事项：
我们还会在 mount 上发出选定的值，以便父级不需要显式设置默认值。如果我们的 select 组件是较大表单的一部分，那么我们希望能够设置正确的 tabindex 。
CSS 1<style scoped> 2 3.custom-select { 4 position: relative; 5 width: 100%; 6 text-align: left; 7 outline: none; 8 height: 47px; 9 line-height: 47px;10}1112.selected {13 background-color: #080D0E;14 border-radius: 6px;15 border: 1px solid #858586;16 color: #ffffff;17 padding-left: 8px;18 cursor: pointer;19 user-select: none;20}2122.selected.open{23 border: 1px solid #CE9B2C;24 border-radius: 6px 6px 0px 0px;25}2627.selected:after {28 position: absolute;29 content: "";30 top: 22px;31 right: 10px;32 width: 0;33 height: 0;34 border: 4px solid transparent;35 border-color: #fff transparent transparent transparent;36}3738.items {39 color: #ffffff;40 border-radius: 0px 0px 6px 6px;41 overflow: hidden;42 border-right: 1px solid #CE9B2C;43 border-left: 1px solid #CE9B2C;44 border-bottom: 1px solid #CE9B2C;45 position: absolute;46 background-color: #080D0E;47 left: 0;48 right: 0;49}5051.item{52 color: #ffffff;53 padding-left: 8px;54 cursor: pointer;55 user-select: none;56}5758.item:hover{59 background-color: #B68A28;60}6162.selectHide {63 display: none;64}65</style>该 CSS只是一个示例，你可以按照你的需求随意修改样式。
我希望这可以帮助你创建自己的自定义选择组件，以下是完整组件要点的链接：
最后，在线演示的示例：https://codesandbox.io/s/custom-vuejs-select-component-8nqgd
原文链接
https://hackernoon.com/how-to-make-a-custom-select-component-in-vuejs-8kt32pj