首页>>前端>>Vue->elementui官网文档(element官方文档)

elementui官网文档(element官方文档)

时间:2023-12-01 本站 点击:0

elementui图标展示文档怎么写

图标是现今比较流行的前端框架了,目前,使用比较多的就是Element UI,为了页面的美观程度,我们每个前端页面大多都会使用一下图标,下面介绍一下图标的使用。如有需要,可参考官网。举个简单的例子,我们编写一个input框,在框后端添加一个搜索的图标,代码如所示,希望我的回答能给您带来帮助

vue-element-component 说明文档

1、目录

vue-element-component

├─src

| ├─views 界面架构文件(layout)

| ├─stories 组件生成文档文件

| ├─router

| | ├─index.js 路由文件

| | └routerName.js 路由菜单配置中文文件

| ├─components

| | ├─common 组件文件

| | ├─autoRouter dev运行路由文件

├─.storybook storybook 配置文件

2、运行项目界面 npm run dev

2.1、组件写在common文件中

需要注意的是:

a、 .vue文件名不要用index.vue,因为在写单元测试的时候,覆盖率测试会检测不到,建议和文件目录名一样。

b、在每个组件下面写index.js文件,npm打包需要用到

2.2、 组件的展示界面写在autoRouter文件中

2.2.1、路由是根据autoRouter文件自动生成的,目前支持一级路由和二级路由。一级路由直接在autoRouter下建立.vue,二级路由需要在autoRouter下建文件目录。

生成路由的格式如下

路由路径根据autoRouter文件目录来解析

2.2.2、左侧菜单是根据路由来生成的。左侧菜单显示的名称就是解析autoRouter文件目录得来的。

如果是一级路由,显示的就是组件的名称。

如果是二级路由,父菜单名称对应的是组件在autoRouter目录下的文件夹名称。子菜单是组件的名称。

2.2.3、 配置左侧菜单名称和icon

左侧菜单显示想自定义名称,可以在router/routerName.js文件中配置,

自定义图标

默认是一级路由显示icon(component),二级路由不显示icon。

icon可以是svg图片 ,项目已经支持了svg图片格式,具体配置在vue.config.js里面。icon也可以是element-ui 的icon

2.3、views 文件

该文件下的内容是构建运行界面的Layout。包含了左侧菜单,顶部头导航,主内容展示。如果只需要写组件测试,生成文档,这个文件可以不需要改动。

3、运行项目文档 npm run storybook

3.1、文档支持scss配置

在.storybook/main.js文件下配置

3.2、配置storybook 左侧菜单以文件夹的形式展示

在.storybook/manager.js 下配置

3.3、组件生成文档

需要在stories文件下写对应的组件.stories.js 文件

3.3.1、属性介绍,可以快速上手,可查看 storybook官网

常用属性:

title:对应左侧菜单

component:组件本身

argTypes:对应props 和 events 属性名称 (需要保持一致)

如果需要配置formList里面的属性,需要在table中配置category:formList。

这时候doc界面展示就会分组

args:设置参数数据(有些组件需要必传一些props,需要用到args)

Template.bind({}):复制功能技术

4、运行打包npm

npm run lib

在本地会生成lib文件 引入打包文件测试,没问题才能上传npm

不是npm包引入

element-ui 动态表头渲染表格

在ElementUI官方文档中,描述的动态渲染只是单纯的将已知字段名称的JSON数据通过prop属性填充到页面中,下为官方文档内容

其中,表格的key值都是固定的。但是针对key值不固定的json数据的渲染,官方文档并未给出明确信息。最近在写项目的时候涉及到的一项需求就是把后台请求到的json数据渲染到页面,但key值并不固定,导致不能按照官方文档提出的方式进行直接渲染。

下面实例为如何根据数据数据schema来动态创建表格,其中header和data_list的数据可以通过后台获取,进而实现表格的动态创建

本地引入Element UI

经查询、实践,目前效果较好的有两种方法:

相关数据:

Element UI官网:

Element UI unpkg地址:


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/6621.html