what？iView的DropDown沒有element的split-button？提issure？等不及了，本身實現一個

 

　　開始正文以前，有必要先說本身實現這個組件的必要性描述。

　　話說你們作表格時，增刪查改按鈕都是放在哪裏的？最簡單的方式應該是這樣：

 

是否是感受奇醜無比啊，因而改爲了這樣：

可是這種操做按鈕一多後就沒位置放了，因而繼續改爲這種：

 

　　然而我老大認爲這種按鈕一多依然不太好看。。。

　　那還有什麼辦法呢？陷入沉思。

　　先說說個人作法，個人作法是這樣的：

　　個人想法是經常使用高頻的操做雙擊行彈窗Modal，全部操做按鈕都不放表格裏，全放表格上方的右側，點擊想操做的行，會高亮那一行，而後點擊上方的操做按鈕便可，這樣有個須要注意的是，每行不能太高，過長的內容得用ellipsis: true來省略顯示，而且最好每頁只展現10行，這樣能夠保證無論想操做哪一行，都在同一個界面操做，不須要滑動滾動條。這樣雖然看起來完美解決了行內放操做按鈕太多很差看的問題，但我老大顯然不這樣認爲，他以爲雙擊編輯這個用戶不必定會知道，這樣就得放個提示信息，但他又不想提示，並且點擊行，再點擊上方操做按鈕，比較麻煩。。。？

　　因而我試着提一個建議，就是仍是雙擊行進入編輯彈窗，而後每行右側放個下拉菜單，就像這樣：

　　然而老大仍是不滿意，他說他想要的是element裏的DropDown，那個下拉菜單有個split-button功能，就是能夠下拉菜單的左邊是個按鈕，有按鈕獨自的點擊事件，右側纔是下拉菜單。但是iView裏的DropDown沒有這種東西，因而我去iView那裏提了個功能建議issure。

　　但是我發現雖然標記成了may be supported in the future，然而要等iView大佬上線這個估計要等到黃花菜都涼了。因此我決定本身動手豐衣足食。

　　大概看了下element的實現，其實就是分離成兩個按鈕，左邊的按鈕能夠點擊，右邊的按鈕給下拉菜單用，而後把這兩個按鈕湊在一塊兒就搞定了。實現起來其實不難，代碼也不長，我直接貼出來了：

<template>
  <span>
    <Button :type="type" @click="$emit('click')" :size="size" :icon="icon" class="btnLeft">
      <slot></slot>
    </Button>
    <Dropdown @on-click="command" :trigger="trigger">
      <Button :type="type" icon="ios-arrow-down" :size="size" class="btnDown"/>
      <template slot="list">
        <slot name="list"></slot>
      </template>
    </Dropdown>
  </span>
</template>

<script>
export default {
  props: {
    /**
     * @description 按鈕類型，可選值爲 default、primary、dashed、text、info、success、warning、error
     */
    type: {
      type: String,
      default: "primary"
    },
    /**
     * @description 按鈕大小，可選值爲large、small、default或者不設置
     */
    size: String,
    /**
     * @description 觸發方式，可選值爲 hover（懸停）click（點擊）contextMenu（右鍵），默認是hover
     */
    trigger: String,
    /**
     * @description 設置按鈕的圖標類型
     */
    icon: String
  },
  methods: {
    command: function(key) {
      this.$emit("command", key);
    }
  }
};
</script>
<style>
.btnDown {
  margin-left: 0 !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.btnLeft {
  margin-right: 0 !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
</style>

　　使用時直接import這個組件，而後用法也和原來的DropDown差很少：

      <ButtonDrop @command="setStatus" @click="setPage(1)" size="large" icon="md-create">
        編輯
        <DropdownMenu v-once slot="list">
          <DropdownItem :name="-1">所有</DropdownItem>
          <DropdownItem v-for="t in statuss" :key="t.k" :name="t.k">{{t.v}}</DropdownItem>
        </DropdownMenu>
      </ButtonDrop>

　　最終的效果就是這樣：

 

　　而後把這個用render放到表格的每一行的右側便可。

　　其實這個組件也是比較簡單的，重要的是這裏面的思路歷程。