elementUI是一個vue.js的ui框架, 在做后台管理系統等方面非常出色,然而面對重復的后台管理系統,大量重復的代碼, 這里我們將使用elemnt ui做二次封裝,以擴展element ui的屬性 來簡化代碼.
本文以 el-button為例el-button是最簡單的組件了,所有操作都需要用到它, 它僅對外提供click事件. 在平時工作中,我們經常遇到一個 重復點擊的問題,點太快了接口沒有返回會導致多次重復請求,這時我們會想到使用防抖或節流,或者使用el-button的loading屬性, 如果使用loading 屬性, 通常 我們會在vue的data中定義一個loading變量,然后調用ajax之前將loading設置為true, ajax返回后將loading設置為false. 這是比較合理的辦法,但是如果一個系統非常多這種情況, 那我們需要每一個頁面都去定義一個loading變量,作為一個合格的程序員,我們當然想不要寫這么多重復的代碼,這時候就需要對el-button做二次封裝了, 如下代碼,我們封裝一個pl-button組件
https://juejin.cn/post/6916474993635229704
如果要全部輸入框都支持“不允許輸入純空格”，就將它封裝成全局組件，看似完美，但是你會發現，el-input組件除了可以進行值的雙向綁定，它還支持size、readonly、disabled...等18個屬性，7個事件，於是接着寫一大堆“中間代碼”來繼承原有el-input的各種屬性、事件。
<template> <el-input v-bind="$attrs" v-on="$listeners" @change="handleChange"></el-input> </template> <script> export default { methods: { handleChange(value) { if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') { this.$emit('input', '') } } } } </script>https://www.jianshu.com/p/1cecb13add26