在 Vue.js 中制作自定义选择组件

每日前端夜话 第288篇

翻译: 疯狂的技术宅

作者:Lane Wagner

来源:hackernoon

正文共:2337  字

预计阅读时间:7 分钟

定制 select 标签的设计非常困难。有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的。在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件。

Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd

HTML

 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    <div
15      class="items"
16      :class="{selectHide: !open}"
17    >
18      <div
19        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: 0
12    }
13  },
14  data() {
15    return {
16      selected: this.options.length > 0 ? this.options[0] : null,
17      open: false
18    };
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}
11
12.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}
21
22.selected.open{
23  border: 1px solid #CE9B2C;
24  border-radius: 6px 6px 0px 0px;
25}
26
27.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}
37
38.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}
50
51.item{
52  color: #ffffff;
53  padding-left: 8px;
54  cursor: pointer;
55  user-select: none;
56}
57
58.item:hover{
59  background-color: #B68A28;
60}
61
62.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

2020年京程一灯全新课程体系即将推出,请保持关注。

愿你在新的一年里保持技术领先,有个好前程,愿你月薪30K。我们是认真的 !

往期精彩回顾

面向开发人员的十大 NodeJS 框架

JavaScript 类完整指南

讲给前端的正则表达式

WebAssembly 正式成为 Web 的第四种语言

2020 年 Node.js 将会有哪些新功能

2020 年 Web 开发展望

从 JavaScript、ES6、ES7 到 ES10,你学到哪儿了?

15个 Vue.js 高级面试题

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章