element-plus element-ui 官網文檔如何查看

前言

基於 vue 的 element 組件庫是目前主流的庫之一，我沒在使用時避不開需要查看官網文件開發，本篇帖子記錄一下我們應該如何查看官網的組件文檔

左側導航欄

直接點選某個組件

用法教程

查看用法教程，點擊功能欄按鈕可以【在線編輯】、【查看源代碼】、【復制案例】、【查看源代碼】

配置項說明（重點）

對組件進行細致化使用時，我們就需要查看配置項文檔了

以下 xxx 既為屬性標簽，例如 Button組件 el-button

xxx 屬性

標簽的屬性配置，有兩種寫法

1. 直接配置 （值為字符串）
2. v-bind 配置（值為變量、bool、number ... 等非字符串類型的值）

// 寫法 1 
<el-button size="small"></el-button>

// 寫法 2
<el-button :size="size"></el-button>
...
data() {
  return {
      size: "small"
  }
},

xxx 事件

標簽的事件配置，事件就是 v-on 的配置，值為函數

<el-input @change ="handlerChange"></el-input>
...
method:{
  handlerChange(){}
}

xxx 插槽

標簽的插槽配置，就是帶 name 的 slot 配置, 下面例子中，prefix就是插槽的名稱。如果文檔中的插槽名稱為【 - 】，則代表默認插槽

<el-input>
  <template #prefix>
    <div>...</div>
  </template>
</el-input>

xxx 方法

標簽的方法配置，方法是針對組件對象的。既需要先獲取到組件對象，一般操作時給組件添加 ref 屬性，通過 ref 屬性獲取到組件，然后調用組件上的方法,下面案例是 vue3 寫法

<el-input ref="inputRef"></el-input>
....

let inputRef = ref(null) // 獲取到 ref 組件

inputRef.focus()

配置屬性對象說明

有些組件的屬性配置是一個對象，會單獨開一欄介紹改對象的結構。例如 tree 組件的 Props 屬性