在 Vue.js 中製做自定義選擇組件

時間 2020-03-04

標籤 vue.js vue 製做自定義選擇組件欄目 JavaScript 简体版

原文原文鏈接

做者：Lane Wagner
翻譯：瘋狂的技術宅javascript

原文：https://hackernoon.com/how-to...css

未經容許嚴禁轉載html

定製 select 標籤的設計很是困難。有時候，若是不使用樣式化的 div 和自定義 JavaScript 的結合來構建本身的腳本，那是不可能的。在本文中，你將學習如何構建使用徹底自定義 CSS 設置樣式的 Vue.js 組件。前端

Demo: https://codesandbox.io/s/cust...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>

須要注意如下幾點：java

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>

該 CSS只是一個示例，你能夠按照你的需求隨意修改樣式。segmentfault

我但願這能夠幫助你建立本身的自定義選擇組件，如下是完整組件要點的連接：服務器

最後，在線演示的示例：https://codesandbox.io/s/cust...