有時候我們在做開發的時候，就想自己寫乙個外掛程式然後就可以使用自己的外掛程式，那種成就感很強。博主最近研究element-ui和axios的時候，發現他們是自定義元件，但是唯一有一點不同的是，在用element-ui的時候是使用vue.use()語句來使用的，而axios的時候，不用vue.use()，只要import就可以匯入進來了，感覺很神奇，細細的發現，原來他們的不同是因為axios裡面並沒有寫install方法，而element-ui就有寫這個方法，下面就利用這個install來寫乙個自己的外掛程式。
首先看一下想要實現的效果
這種ui設計的element中並沒有想要樣式 這時就需要我們自己進行書寫
1.首先建立乙個外掛程式檔案
class
=" type==
'default'
?'btn'
:type==
'tj'
?'btn tj'
:type==
'yd'
?'btn yd'
:type==
'ps'
?'btn ps'
:type==
'dd'
?'btn dd'
:type==
'success'
?'btn success'
:'btn'
">
"../../assets/img/tj.png" v-if=
"type=='tj'"
/>
"../../assets/img/yd.png" v-if=
"type=='yd'"
/>
"../../assets/img/dd.png" v-if=
"type=='ps'"
/>
"../../assets/img/ps.png" v-if=
"type=='dd'"
/>
"../../assets/img/success.png" v-if=
"type=='success'"
/>
<
/slot>
<
/div>
<
/template>
export
default}}
<
/script>
.btn
.tj.yd
.ps.dd
.success
<
/style>設定好樣式 及判斷資訊
2.在當前根目錄下建立乙個js檔案
import button from
"./index.vue"
; button.
install
=(vue)
=>
export
default button;
import button from
"./button"
const components =
[ button
]const
install
=(vue)
=>
}export
default
import yangui from
"./common/button/index"
vue.
use(yangui)
"scope"
>
"tj" v-if=
"scope.row.currentstatus=='1'&&scope.row.display!=='1'"
>已提交<
/yang-button>
"yd" v-if=
"scope.row.currentstatus=='1'"
>已讀<
/yang-button>
"ps" v-if=
"scope.row.currentstatus=='4'"
>配送中<
/yang-button>
"success" v-if=
"scope.row.currentstatus=='0'"
>已完成<
/yang-button>
<
/template>
Vue的elementUI實現自定義主題
使用vue開發專案，用到elementui，根據官網的寫法，我們可以自定義主題來適應我們的專案要求，下面來介紹一下兩種方法實現的具體步驟，可以參考官方文件自定義主題官方文件 先說專案中沒有使用scss編寫，用主題工具的方法 使用的較多 使用vue cli安裝完專案並引入element ui 具體可參...
element ui全域性自定義主題
需要注意的是建立element variables.scss檔案在 src 下,注意路徑問題 element 的 theme chalk 使用 scss 編寫，如果你的專案也使用了 scss，那麼可以直接在專案中改變 element 的樣式變數。新建乙個樣式檔案，例如element variable...
Element ui前端自定義排序
1.在需要自定義排序的列上 el table column 加上sortable cistom 2.在el table上增加sort change事件，監聽列的排序 定義需要排序的列，這樣可以省去多個if else if const actions new map votes votes calcw...