VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便。组件封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件(component)是vue的最强大功能之一,组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。本篇随笔介绍前端框架中常用到的一些组件封装处理,用于简化界面、隐藏实现细节的目的。

1、组件封装的需要

在我们开发一个主要界面的时候,一般需要排列很多内容,各个部分的内容可能会在其他界面上比较常见,那么这些如果是简单的使用原始的Element界面组件,以及简单的复制处理的话,页面代码比较臃肿,而且随着不断的复制过去使用,各部分的界面又不在统一了。这个时候如果把那些相同的功能,抽象出来抽离成组件,通过组件引用方式就会显得格外省事了。

在Winform开发中,我们知道有很多常见的用户自定义控件,就是对常规界面内容的一些通用部分进行封装,拖动过来即可使用。现在VUE+Element 前端应用的组件开发也很容易,把界面代码和Vue的控制逻辑JS代码组合一起形成一个小组件,通过使用Prop的方式传入所需参数,由组件内部控制界面的展示逻辑及事件处理,那么界面调用组件的时候就非常简洁,这样我们主页面上的代码量就降低不少,也方便代码的维护。

例如对于常规的字典下拉列表,我们希望绑定一个字典类型就可以实现系统的下拉列表的显示,那么我们可以封装这个常见的界面内容为一个字典组件。

还有对于树列表及其过滤实现等常规的处理,我们也可以通过简单的封装,实现树列表的展示,这样我们传入对应的树列表数据即可呈现所需要的树状列表内容。

另外,还有一种情况,是界面内容太多,我们把它按内容划分为不同的界面组件,然后页面进行独立的维护,主界面直接一行代码即可集成所需的内容板块,极大减少主界面的代码铺陈。

例如:对于权限系统中的每个角色,除了包含基本信息外,还会包含拥有的权限(功能控制点)、包含用户,以及拥有的菜单,其中权限是用来控制界面元素,如操作按钮的显示的,而拥有的菜单,则是用户以指定账号登录系统后,获得对应角色的菜单,然后构建对应的访问入口的。角色界面模块UML类图如下所示。

那么对应界面元素上,我们就应该以不同的Tab来展示这些信息,每个Tab内容部分就可以作为一个独立的界面组件来开发。

在比如,组织机构里面添加成员和添加角色的操作UML图。

其中添加成员、添加角色,涉及界面的列表数据展示以及对应的添加展示操作,独立一个界面组件还是比较方便的,而且添加成员 ,在角色维护模块里面也需要用到,那么可以兼容两个场景来设计组件模块。

2、界面组件的封装处理

在VUE+Element 的前端场景中,想要封装好一个组件,一般要熟练掌握的三个技能:1、父组件传值到子组件(props) 2、子组件传值到父组件($emit)3、插槽使用(slot)。对于一个独立的组件,props是用来为组件内部注入核心内容;$emit用来使这个组件通过一些操作来融入其它组件中。

我们来详细分析下前面介绍的组件场景。

对于字典模块来说,一般如果需要实现和系统字典模块里面的Api对接,并展示对应字典类型的下拉列表,实现代码如下所示。

<el-select v-model="searchForm.ProductType" filterable clearable placeholder="请选择">
<el-option
v-for="(item, key) in typeList"
:key="key"
:label="item.value"
:value="item.key"
/>
</el-select>

然后在JS逻辑里面使用字典的API获取对应数据,然后绑定到typeList属性上面即可。这样的逻辑如果每个用到字典的地方都需要这样处理,代码显然比较臃肿,而且使用组件封装更方便。

我们在Componen目录下创建一个Common目录,然后在其中添加一个my-dictdata.vue文件,用来封装字典内容处理的。

如果我们完成组件的编写,那么引用组件只需要一行代码即可实现相同的功能了。

<my-dictdata v-model="searchForm.ProductType" type-name="商品类型" />

以及在页面的组件里面引入这个自定义组件即可。

import myDictdata from '@/components/Common/my-dictdata'
export default {
components: { myDictdata },

如果为了简便,也可以在main.js里面统一全局引入。

这样相对于使用原始的Element界面组件,既有界面代码,又有JS代码,这样的一行代码就实现功能,显得非常简洁。

为了了解其中的奥秘,我们对组件的开发过程进行简单的了解,其中组件界面部分的代码如下所示,和上面的差不多。

<template>
<el-select v-model="svalue" filterable clearable placeholder="请选择">
<el-option
v-for="(item, index) in dictItems"
:key="index"
:label="item.Text"
:value="item.Value"
>
<span style="float: left;color:yello;">
<i class="el-icon-tickets" style="color:blue;" />
{{ item.Text }}
</span>
</el-option>
</el-select>
</template>

然后在JS部分引入字典操作的Api类,以及定义Prop属性typeName,如下所示。

并对传入Model值进行监控

我们在Mounted的实现里面,增加对字典数据的请求绑定,如下所示。

对于树形列表

一般来说它的使用代码如下所示。

还是可以感觉比较臃肿,如果放到主页面里面,会占用很多代码行,维护起来也不方便,而且树列表也是一个常见的界面展示内容,可以通过简单的封装进行减少主页面的代码量。

同样我们可以通过封装一个树列表组件

我们可以在my-tree.vue里面定义很多常见的的Prop属性,以方便调用的时候传入对应的值来改变界面的呈现。

这样主界面调用组件来实现功能的时候,只需要一行界面代码即可。

<myTree :data="treedata" icon-class="el-icon-price-tag" @nodeClick="nodeClick" />

相应的处理获得treedata的操作,是下面的函数

    getTree() { // 树列表数据获取
var param = {
SkipCount: 0,
MaxResultCount: 1000,
Tag: 'web' // Web端专用
}
menu.GetAll(param).then(data => {
this.treedata = [];// 树列表清空
var list = data.result.items
if (list) {
// 使用getJsonTree函数,实现对二维表转换为嵌套树对象集合
var newTreedata = getJsonTree(list, {
id: 'id',
pid: 'pid',
children: 'children',
label: 'name'
});
this.treedata = newTreedata
}
});
},

而对于部分页面组件的方式,这种一般不是很通用的组件,一般我们可以把它放在同一个目录上的Components目录里面,如下是权限模块里面用到的一些界面内容组件封装。

完成添加成员、添加角色的界面组件后,我们就可以在组织机构界面里面引入使用。

角色管理,我们也依据这个来对模块的内容进行划分,不同业务设计不同的界面组件,最后整合一起使用即可。

<el-dialog title="查看信息" :visible="isView" :modal-append-to-body="false" @close="closeDialog">
<el-col>
<el-tabs value="basicPage" type="border-card">
<el-tab-pane name="basicPage" label="基本信息">
<el-form ref="viewForm" :model="viewForm" label-width="120px">
<el-form-item label="角色名">
<el-input v-model="viewForm.name" disabled />
</el-form-item>
<el-form-item label="角色显示名">
<el-input v-model="viewForm.displayName" disabled />
</el-form-item>
<el-form-item label="角色描述">
<el-input v-model="viewForm.description" type="textarea" disabled />
</el-form-item>
</el-form>
</el-tab-pane> <el-tab-pane name="permitPage" label="权限">
<rolefunction ref="rolefunction" :role-id="selectRoleId" />
</el-tab-pane> <el-tab-pane name="userPage" label="用户">
<roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" />
</el-tab-pane> <el-tab-pane name="menuPage" label="菜单">
<rolemenu ref="rolemenu" :role-id="selectRoleId" />
</el-tab-pane>
</el-tabs>
</el-col>
<div slot="footer" class="dialog-footer">
<el-button type="success" @click="closeDialog">关闭</el-button>
</div>
</el-dialog>

或者

以上就是我们封装一些常见通用组件,以及页面模块的组件,主要的目的就是可以简化主调用界面的代码,以及提高使用的效率。

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  2. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  3. 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

    在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...

  4. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  5. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  6. 循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

    在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...

  7. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  8. 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  9. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

随机推荐

  1. JavaFX桌面应用开发系列文章

    ~ JavaFX桌面应用开发系列文章汇总篇 ~ JavaFX桌面应用开发-HelloWorld JavaFX布局神器-SceneBuilder JavaFX让UI更美观-CSS样式 JavaFX桌面应 ...

  2. docker,容器,编排,和基于容器的系统设计模式

    目录 从容器说起 背景 docker实现原理 编排之争 基于容器的分布式系统设计之道 单节点协作模式 Sidecar pattern(边车模式) Ambassador pattern(外交官模式) A ...

  3. C#LeetCode刷题之#110-平衡二叉树(Balanced Binary Tree)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4074 访问. 给定一个二叉树,判断它是否是高度平衡的二叉树. 本 ...

  4. C#设计模式之4-原型模式

    原型模式(Prototype Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/395 访问. 原型模式属 ...

  5. vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo

    1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文 ...

  6. vue-loader处理vue文件

    loader:"vue-loader" ,引导vue文件被vue-loader/lib/index.js处理 第一步:解析vue文件 const utils = require(' ...

  7. Git使用之submodule

    入职第一周,就因为clone项目而产生了很大的障碍,花了差不多三四个小时才定位问题并解决,记录一下. 一.问题 当我们在使用Git克隆项目的时候,无法克隆下来一个文件夹.记该文件夹为A,A在远程仓库是 ...

  8. windows服务器下,mysql运行一段时间之后忽然无法连接,但是mysql服务启动正常

    出现这种情况以前都是重启服务器可以解决,但是治标不治本,一段时间之后仍然会出现此问题. 此问题不是mysql应用程序的问题而是windows server system 的配置问题.因此需要修改win ...

  9. 边缘计算、区块链、5G,哪个能走的更远

    频繁出现的新词汇5G.区块链.边缘计算,这些都代表了什么,又能给我们的生活带来什么巨大的改变么?抉择之时已至,能够走向未来的真的只有一个吗? "没有什么能够阻挡,你对自由的向往....&qu ...

  10. idea github 上传项目

    1.创建本地仓库,VCS-->Import into Version Control-->Create Git Repository... 在弹框中选中项目所在的位置,点击OK,此时项目文 ...