說明
本文將介紹element-ui的一般用法菲茬，以及文檔的正確閱讀姿勢吉挣，還有就是一些使用過程中遇到一些坑的總結(jié)（說白了就是用的不夠熟練...不過坑的確還是有的...）
官方鏈接：https://element.eleme.cn/2.0/#/zh-CN/component/installation
一般組件使用
element-ui的基本使用還是十分簡單的派撕，首先根據(jù)文檔的步驟進(jìn)行安裝，導(dǎo)入需要的樣式即可睬魂，這一塊直接看文檔就已經(jīng)說明的很清楚了：文檔鏈接终吼。接著，你只需要找到你想要的樣式氯哮，然后點開詳細(xì)代碼衔峰，復(fù)制到你的.vue文件里那么就可以了，例如直接復(fù)制官方提供的radio組件(鏈接)的第一個代碼：
<template>
<div>
<!-- 因為template里面只能有一個根元素蛙粘，官方這里拷過來以后在外面加了一層div標(biāo)簽包起來 -->
<el-radio v-model="radio" label="1">備選項</el-radio>
<el-radio v-model="radio" label="2">備選項</el-radio>
</div>
</template>
<script>
export default {
data() {
return {
radio: "1"
};
}
};
</script>
可以看出element-ui的上手使用還是挺容易的，在理想情況下威彰，只需要以下步驟：
- 找想要的樣式組件
- 復(fù)制代碼到對應(yīng)的
.vue文件 - 修改對應(yīng)的數(shù)據(jù)
非組件樣式使用
官方提供的樣式中有一部分并非是組件樣式出牧，比如：字體圖標(biāo)、全局指令歇盼、全局事件等舔痕，這里簡單說明下這類樣式的使用方法
圖標(biāo)樣式使用
官方提供了很多圖標(biāo)樣式（鏈接），通過閱讀文檔可以發(fā)現(xiàn)：一般情況下豹缀，使用i標(biāo)簽伯复，并將class屬性設(shè)置成對應(yīng)的圖標(biāo)名即可；而對于別的組件希望引入圖標(biāo)時（有icon屬性的組件邢笙，例如el-button）啸如，設(shè)置icon屬性為對應(yīng)的圖標(biāo)名即可
指令樣式使用
例如Loading加載（鏈接），其提供的是一個指令v-loading氮惯，而非一個組件叮雳，那么使用也很簡單，因為已經(jīng)注冊了全局組件妇汗，直接調(diào)用就行了帘不，舉例：
<template>
<div>
<div v-loading="isLoading">這塊內(nèi)容使用v-loading指令，true時loading</div>
<el-button @click=handle>{{clickText}}</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true,
clickText: "取消loading"
}
},
methods:{
handle(){
this.isLoading = !this.isLoading
if (this.isLoading) {
this.clickText = "取消loading"
} else {
this.clickText = "繼續(xù)loading"
}
}
}
};
</script>
事件樣式使用
例如Message消息提示（鏈接）杨箭，其提供是也不是組件寞焙，而是發(fā)送一個事件，那么使用時只需要參考文檔發(fā)送的數(shù)據(jù)屬性選項即可
文檔讀法
element-ui文檔提供了很多示例代碼互婿，一般情況下我們直接拷下示例代碼稍微看著改改數(shù)據(jù)之類的就夠用了捣郊。但是在某些場景下，我們可能又需要使用到一些特殊的功能和屬性擒悬，而這些功能屬性一般在官方提供的組件中都已經(jīng)內(nèi)置了模她，所以我們可以直接先從文檔中尋找查看是否有屬性或者方法等能夠滿足我們的需求，從而避免重復(fù)造輪子懂牧。下面就來說明下文檔里提供的屬性侈净、方法等如何閱讀以及使用尊勿。
attribute讀法
顧名思義，就是官方提供的屬性畜侦，使用很簡單元扔，直接設(shè)置屬性和對應(yīng)的值就行了，直接拿el-input組件(鏈接)來說旋膳，例如其提供的Input Attributes里面有maxlength（最大輸入長度澎语，number型）和clearable（是否可清空，boolean型）验懊，那么：對于非boolean型的屬性擅羞，需要直接設(shè)置值的內(nèi)容；對于boolean型的屬性义图，一般默認(rèn)是false减俏，而直接添加該屬性，默認(rèn)就是設(shè)置為true碱工，下面是使用了這兩個屬性的示例代碼：
<template>
<div>
<el-input v-model="name" maxlength="10" clearable></el-input>
<!-- 最大長度為10娃承，設(shè)置可清空，添加該boolean屬性即默認(rèn)為true怕篷，等同于：clearable="true" -->
</div>
</template>
<script>
export default {
data() {
return {
name: "aaa"
};
}
};
</script>
slot讀法
slot的使用和普通的slot用法沒什么區(qū)別历筝，直接在該組件當(dāng)中定義一個標(biāo)簽，并設(shè)置該標(biāo)簽的slot屬性即可廊谓，還是拿el-input組件舉例梳猪，其Input slots下提供了prepend（輸入框頭部內(nèi)容，只對 type="text" 有效）蒸痹，下面是使用了該slot的代碼示例：
<template>
<div>
<el-input v-model="name">
<template slot="prepend">aaa</template>
<!-- 定義一個template標(biāo)簽舔示，設(shè)置slot為對應(yīng)的值，里面插入對應(yīng)的內(nèi)容电抚，不一定要用template標(biāo)簽惕稻，別的也可以 -->
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
name: "aaa"
};
}
};
</script>
event讀法
event就是提供的監(jiān)聽事件，直接使用v-on（簡寫@）綁定該event即可蝙叛，例如el-input組件的Input Events下提供了change方法俺祠，并且看到回調(diào)參數(shù)里包括value，那么該事件將會傳遞這個參數(shù)借帘，下面使用該事件舉例：
<template>
<div>
<el-input v-model="name" @change="handleChange"></el-input>
<!-- 監(jiān)聽change事件蜘渣，并綁定對應(yīng)的處理方法 -->
</div>
</template>
<script>
export default {
data() {
return {
name: "aaa"
};
},
methods: {
handleChange(value) {
// 監(jiān)聽事件的處理方法，回調(diào)時會獲取到修改后的值
alert(`值被修改為：${value}`);
}
}
};
</script>
method讀法
method就是該組件內(nèi)置的方法肺然，使用時可以通過ref屬性調(diào)用蔫缸，使用步驟如下：
- 組件設(shè)置
ref屬性（具體ref屬性用法參考：https://www.cnblogs.com/wu50401/p/10213081.html） - 通過
this.$refs.ref屬性名.方法()調(diào)用組件自身的method方法
例如el-input組件提供了focus()方法，舉例如下：
<template>
<div>
<el-input v-model="name" ref="nameInput"></el-input>
<!-- 設(shè)置一個ref屬性 -->
<el-button @click="handle">focus in input</el-button>
</div>
</template>
<script>
export default {
data() {
return {
name: "aaa"
};
},
methods: {
handle() {
this.$refs.nameInput.focus();
// 調(diào)用文檔提供的focus方法聚焦到對應(yīng)的組件
}
}
};
</script>
注：
這里實際上就是父組件調(diào)用子組件方法的場景
option讀法
option一般是一些attribute的類型為object類型時际起，該attribute對象里的鍵值參考拾碌，這里拿el-time-select組件（時間選擇器吐葱，鏈接）舉例，該組件里的picker-options屬性是object類型校翔，而文檔也提供了Time Select Options的參數(shù)說明弟跑，下面是使用示例：
<template>
<div>
<el-time-select
v-model="value1"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
></el-time-select>
<!-- 直接照搬官方文檔提供了...這里加下說明：picker-options是object類型，option里則提供了各種該對象里的參數(shù) -->
</div>
</template>
<script>
export default {
data() {
return {
value1: ""
};
}
};
</script>
子組件讀法
很多提供的組件里都含有子組件防症，比如el-select下就有子組件el-option孟辑，那么使用時只需要將其嵌套在父組件，而對應(yīng)子組件的attributes蔫敲、slot等的使用方式也是一樣的饲嗽，這里提供el-select結(jié)合子組件el-option的使用示例：
<template>
<div>
<el-select v-model="value" placeholder="請選擇">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
<!-- 子組件el-option嵌套在父組件el-select中，其他都像普通組件一樣使用 -->
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "選項1",
label: "黃金糕"
},
{
value: "選項2",
label: "雙皮奶"
}
],
value: ""
};
}
};
</script>
常見問題
樣式修改不生效問題
element-ui本身提供了很多樣式奈嘿，但有時候想要稍微修改一下組件里面的樣式喝噪，發(fā)現(xiàn)修改樣式竟然不生效？
別急指么，下面兩種辦法可以搞定：
- 方法一：在設(shè)置樣式屬性時，前面加上
>>>來修改樣式榴鼎，但是這個在使用scss的時候可能不會生效伯诬，那么此時就使用方法二 - 方法二：使用
/deep/（記得用空格隔開）來修改樣式，本質(zhì)上和>>>是一樣的巫财，相當(dāng)于別名盗似，舉例：
/deep/ .el-xxx {
...
}
- 方法三：如果上面的也都不行，就使用
::v-deep（記得用空格隔開）試試平项，舉例：
::v-deep .el-xxx {
...
}
查了下原因，原來是因為由于提供的組件樣式設(shè)置了scope關(guān)鍵字，導(dǎo)致其樣式處于局部割以，我們無法隨便更改蕊玷，如果非要修改局部的樣式，那么就使用上面提供的關(guān)鍵字來實現(xiàn)扣讼。
（這也不算是element-ui的問題缺猛，在vue的組件化開發(fā)中就是規(guī)定如此，只不過平常自己開發(fā)的組件樣式都可以自己規(guī)定椭符，所以一般不會發(fā)現(xiàn)這個問題...）
element-ui導(dǎo)航欄報錯：vue中的NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
當(dāng)多次訪問同一路由時會報的錯荔燎，雖然報錯了，但本身不影響使用销钝，只需要將該報錯屏蔽即可有咨，參考：
http://www.reibang.com/p/af280206d57c
element-ui中組件方法重寫問題
有些官方提供的組件其內(nèi)部實現(xiàn)的函數(shù)并非是我們希望，比如el-image組件的click事件定義如下：
clickHandler() {
// prevent body scroll
prevOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
this.showViewer = true;
},
該事件導(dǎo)致的結(jié)果就是點擊圖片以后會發(fā)現(xiàn)頁面無法滾動蒸健，讓人產(chǎn)生一種頁面卡死的錯覺座享，因此我們可以通過以下方式來解決該問題：
- 在使用組件的地方重寫該方法婉商，具體步驟就是通過
ref綁定該組件，然后重寫該組件的方法（其中this指向問題需要注意征讲，我們可以通過call/apply/bind方式改變其指向）据某，舉例：
<el-image ... ref="test">
...
</el-image>
...
mounted() {
// 重寫clickHandler方法，并使用call方式在調(diào)用時修改指向
this.$refs.test.clickHandler = () => {
function test() {
console.log(this.src);
}
test.call(this.$refs.test);
};
// 使用bind方式修改方法指向
// this.$refs.test.clickHandler = function() {
// console.log(this.src);
// }.bind(this.$refs.test);
},
- 在引入Element前重寫該方法诗箍，這種方式適合大量引用該組件時使用癣籽，避免代碼的重復(fù)，舉例：
Element.Image.methods.clickHandler = function() {
console.log(this.src);
};
...
Vue.use(Element);
- 直接重寫該組件（組件的定義在element-ui的package目錄下）滤祖，直接把對應(yīng)的
.vue文件拷下來改寫筷狼，之后我們直接引入改寫后的組件即可，這種方式適合對組件進(jìn)行大改動的時候匠童，一次改寫埂材，一勞永逸
