首页 > 其他分享> 文章详细

element-plus element-ui 官网文档如何查看

2022-01-26 13:03:39 阅读：257 来源： 互联网

标签：xxx 查看插槽配置 element plus 组件 ui 属性

前言

基于 vue 的 element 组件库是目前主流的库之一，我没在使用时避不开需要查看官网文件开发，本篇帖子记录一下我们应该如何查看官网的组件文档

左侧导航栏

直接点选某个组件

用法教程

查看用法教程，点击功能栏按钮可以【在线编辑】、【查看源代码】、【复制案例】、【查看源代码】

配置项说明（重点）

对组件进行细致化使用时，我们就需要查看配置项文档了

以下 xxx 既为属性标签，例如 Button组件 el-button

xxx 属性

标签的属性配置，有两种写法

直接配置（值为字符串）
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 属性

标签：xxx,查看,插槽,配置,element,plus,组件,ui,属性
来源： https://www.cnblogs.com/shuiche/p/15846117.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9