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放到表格的每一行的右側即可。
其實這個組件也是比較簡單的,重要的是這里面的思路歷程。
浙公網安備 33010602011771號