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 属性