vue組件—支持單選或者多選

之前做了一個單頁面的單選和多選，這里我整理了一下，封裝成組件，能夠同時支持單選和多選。

我這里的代碼是在vue腳手架（vue-cli）上開發完成的，搭建方法這里就不細說了。

這個組件的名字呢命為 option.vue

option.vue

HTML：

<div class="chooser">
  <ul class="chooser-list">
    <li :style="cssStyle"
    v-for="(item, index) in options" :key="index"
    @click="optionsClick(item)"
    :class="{active: checkActive(item)}"
    >{{ item }}</li>
  </ul>
</div>

　CSS：

ul, li {
  margin: 0;
  padding:0;
  list-style: none;
}
.chooser {
  position: relative;
  display: inline-block;
}
.chooser-list li{
  margin: 5px;
  width: 80px;
  height: 40px;
  line-height: 40px;
  border-radius: 7px;
  display: inline-block;
  border: 1px solid #9C9C9C;
  color: #9C9C9C;
  text-align: center;
  background: #fff;
}
.chooser-list li.active {
  border-color: #097fe0;
  color: #097fe0;
  background: #fff;
}

　　JS：

export default {
  name: 'options',
  data () {
    return {
       currValArr: []
    }
  },
  props: {
    options: Array, //傳入的數組
    isMultiply: { //是否是多選。默認為false：單選；true：多選
      type: Boolean,
      default: false
    },
    cssStyle: Object //可以自定義單選或者多選的樣式
  },
  methods: {
    optionsClick (item) {
    },
    checkActive (item) {
    }  
  }
}

到這里為止呢，我們需要把兩個方法里的邏輯補齊。

optionClick()，這個方法要實現點擊然后選中，傳的參數是當前數組值，在里面我們需要判斷是單選還是多選

optionsClick (item) {
      if (this.isMultiply === false) { //單選
        this.$set(this.currValArr, 0, item) // 將該值設為當前數組的第一項
      } else { //多選
        if (this.currValArr.indexOf(item) === -1) {
          // 當前數組中沒有該值則push到數組
          this.currValArr.push(item)
        } else { 
          //當前數組中有該值，找到該值下標並刪除
          this.currValArr.splice(this.currValArr.indexOf(item), 1)
        }
      }
}

那么在checkActive方法中，需要得到一個布爾值，來確定是否添加類名active

checkActive (item) {
      if (this.isMultiply === false) {
        this.currValArr.length = 1
      }
      return this.currValArr.indexOf(item) !== -1
}

　App.vue

<template>
  <div id="app">
    <h3>單選</h3>
    <options :options="selections"></options>
    <h3>多選</h3>
    <options :options="selections1" :isMultiply=true></options>
  </div>
</template>
<script>
import Options from './components/options'; //注意這里的路徑
export default {
  name: 'App',
  components: {
      Options
    },
    data () {
      return {
        selections: ['趙雅芝','劉雪華','俞飛鴻','林青霞','陳美琪'],
        selections1: ['慕容沖','潘安','宋玉','衛玠','蘭陵王']
      }
    },
}
</script>

　效果圖如下：

雖然現在看上去基本OK了，單選多選都能實現，但我們還希望他能實現雙向綁定，現在視圖可以更新數據，我們接下來完成數據更新視圖

App.vue 中，

      template:

<options :options="selections" v-model="value"></options>
<div>當前選中值：{{value}}</div>

<options :options="selections1" v-model="value1" :isMultiply=true></options>
<div>當前選中值：{{value1}}</div>

　　js:

data () {
   return {
    // 代碼省略
     value: ['趙雅芝'],
     value1: ['衛玠','潘安',]
   }
}

　option.vue中

export default {
  name: 'options',
   model: {
     prop: 'currValArr',
     event: 'input'
  },
  props: {
    currValArr: Array,
    options: Array,
    isMultiply: {
      type: Boolean,
      default: false
    },
    cssStyle: Object
  },
  methods: {
    // ...
  }
}

　這樣，就實現了雙向綁定了。使用了自定義組件的v-model，利用model選項，來指定prop和event。不了解自定義組件model的可以去官網看，上面講解的很詳細。