怎么用Vue制作自定义选择组件

本篇内容介绍了“怎么用Vue制作自定义选择组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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 。

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>

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

“怎么用Vue制作自定义选择组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！