资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/数据驱动，快速开发组件（ElementUI篇）

数据驱动，快速开发组件（ElementUI篇）

enrecul101 / 2978人阅读

摘要：基于这种思路，那留给我们的只有两步，组件设计和数据设计。关于组件的相关逻辑，可能要在文章里面一次性说清楚，还是需要费很大的精力，不过希望数据驱动的思想能够让之前没有体会到这种开发乐趣的小伙伴们有到新的想法。

在日常开发中，我们肯定不止一次碰到重复的业务代码，明明功能相似，但总没思路去把它封装成组件。关于封装组件，希望这篇文章能带给大家新的思路，去更高效的完成日常开发。（注：例子都是基于ElementUI, 但思路都是一样的）

示例地址-> https://www.lyh.red/admin

代码地址

数据驱动

构建页面：设计数据结构（绑定value，绑定事件，相关属性）-> 生成dom -> dom绑定相关

监听事件：操作UI -> 触发事件 -> 更新数据 -> 更新UI

数据驱动是基于数据触发的，在编写业务的时候，只需要编写好组件的dom结构，之后我们便可以不用再去关心dom层，只需要关心数据就ok。
基于这种思路，那留给我们的只有两步，组件设计和数据设计。

先看看效果 
搜索栏配置以及生成效果
      // 过滤相关配置
      filterInfo: {
        query: {
          create_user: "",
          account: "",
          name: ""
        },
        list: [
          {type: "input", label: "账户", value: "account"},
          {type: "input", label: "用户名", value: "name"},
          // {type: "select", label: "创建人", value: "create_user"},
          // {type: "date", label: "创建时间", value: "create_time"},
          {type: "button", label: "搜索", btType: "primary", icon: "el-icon-search", event: "search", show: true},
          {type: "button", label: "添加", btType: "primary", icon: "el-icon-plus", event: "add", show: true}
        ]
      }

表格配置以及生成效果
      // 表格相关
      tableInfo: {
        refresh: false,
        initCurpage: false,
        data: [],
        fieldList: [
          {label: "账号", value: "account"},
          {label: "用户名", value: "name"},
          {label: "性别", value: "sex", width: 80, list: "sexList"},
          {label: "账号类型", value: "type", width: 100, list: "accountTypeList"},
          {label: "状态", value: "status", width: 90, list: "statusList"},
          {label: "创建人", value: "create_user"},
          {label: "创建时间", value: "create_time", minWidth: 180},
          {label: "更新人", value: "update_user"},
          {label: "更新时间", value: "update_time", minWidth: 180}
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "180",
          btList: [
            {label: "编辑", type: "", icon: "el-icon-edit", event: "update", show: true},
            {label: "删除", type: "danger", icon: "el-icon-delete", event: "delete", show: true}
          ]
        }
      }

dom配置和完整页面

封装一个搜索栏（功能栏）组件 根据需求设计数据结构 
参数设计

搜索参数query，比如要查询的参数有账号，名字。

dom相关属性设计

首先要考虑dom的类型，和显示，这是基本的，还有扩展类型，比如事件可以设置event属性，是否显示设置show属性，这些是比较通用的。
而基于不同类型的dom，如果是input，select，datetime类型的dom，作为一个承载数据的容器，则需要一个value属性去和query中的属性名对上，除此之外不同类型的dom还有不同的特定属性，比如select需要提供对应的list，datetime需要相关的pickersOptions去限制时间范围，如果是按钮，比如el-button,则可以设置icon，按钮相关type。

最终实现：

filterInfo: {
        query: {
          create_user: "",
          account: "",
          name: ""
        },
        list: [
          {type: "input", label: "账户", value: "account"},
          {type: "input", label: "用户名", value: "name"},
          // {type: "select", label: "创建人", value: "create_user"},
          // {type: "date", label: "创建时间", value: "create_time"},
          {type: "button", label: "搜索", btType: "primary", icon: "el-icon-search", event: "search", show: true},
          {type: "button", label: "添加", btType: "primary", icon: "el-icon-plus", event: "add", show: true}
        ]
      }

循环的dom列表

设计dom结构 
先考虑设计的这个dom需要什么属性

比如dom是el-input，一个输入框，可以设置是否禁止disabled，可以设置是否可清空clearable，v-model要绑定的数据，设置dom的class名，设置dom绑定的事件。
比如dom是el-select， 除了上面这些属性，我们还需要这个元素可循环的list

最终dom结构为：

    

      
      
      
      
      
      
        
      
      
      
      
      
      
      
      
      {{item.label}}
事件的处理 
事件怎么绑定在dom上

绑定事件，可以在数据结构中给dom设置一个event属性，比如说是查询search，在dom结构中我们可以设计一个中间层函数去处理，比如：


      {{item.label}}

中间层函数接收事件类型，然后统一处理。

组件中的函数，外部怎么处理

我觉得组件的话，就承载一个去重复的作用，将所以重复的事情去除就可以，像如果是表格，表单，功能栏类似这种可能显示重复但是事件多变性的组件，我们则可以考虑将它们的事件派发到业务相关页面处理，组件保持去除重复的工作，简单干净明了就好了。
将事件全部交给父级处理：

    // 绑定的相关事件
    handleEvent (evnet) {
      this.$emit("handleEvent", evnet)
    },
    // 派发按钮点击事件
    handleClickBt (event, data) {
      this.$emit("handleClickBt", event, data)
    }
封装一个tree组件 
在后台管理页面树状组件用到次数实在太多了，静态的树数据加载，动态的树数据懒加载，左键点击事件，右键点击事件等等，封装之后，哼哼，谁用谁知道，一个字，爽。
设计属性 
其实就是将elementui中的大部分用上的tree属性加上，然后再设计一部分让组件更加好用的属性，部分举个例子。
属性 类型 描述
lazy Boolean 是否懒加载
lazyInfo Array 懒加载相关数据
loadInfo Object 正常相关数据
rightClick Boolean 是否需要右键菜单
rightMenuList Array 右键菜单列表 
懒加载数据和正常加载数据结构的详细设计
    /**
     * 懒加载相关数据
     * key -> 唯一标识 label -> 显示 type -> 类型 api -> 接口 params -> 参数 leaf -> 是否叶子节点
     */
    lazyInfo: {
      type: Array,
      default: () => {
        return [
          {
            key: "id",
            label: "name",
            type: "",
            api: () => {},
            params: {key: "", value: "", type: "url"}, // url/query->{data: [{key: "", value: "", default: ""}] type: "query"}
            leaf: true
          }
        ]
      }
    },
    /**
     * 正常加载相关
     */
    loadInfo: {
      key: "id",
      label: "name",
      api: () => {},
      params: {key: "", value: "", type: "url"} // url/query->{data: [{key: "", value: "", default: ""}] type: "query"}
    },
事件处理

事件处理同样是需要派发到父级处理，以保证组件的可复用性，通过中间件将树组件的相关事件派发搭到父级。

实现效果

懒加载树组件相关数据配置：

      // 树相关信息
      treeInfo: {
        refresh: false,
        refreshLevel: 0,
        nodeKey: "key",
        lazy: true,
        type: 0, // 省市区类型
        lazyInfo: [
          {
            key: "id",
            label: "name",
            type: 1,
            api: getAllApi,
            params: {key: "pid", value: 1, type: "url"}
          },
          {
            key: "id",
            label: "name",
            type: 2,
            api: getAllApi,
            params: {key: "pid", value: "", type: "url"},
            leaf: true
          }
        ],
        rightMenuList: []
      },

懒加载树dom结构：

  

    
    
    
    
    
      
  • {{item.name}}
    •

实现效果：

总结 
本文以后台管理页面为例，一般后台管理页面常用到的tree, table, form, dialog, 搜索栏已经全部做成了可复用的组件，只需要配置好相关数据，引入组件即可使用。
关于组件的相关逻辑，可能要在文章里面一次性说清楚，还是需要费很大的精力，不过希望数据驱动的思想能够让之前没有体会到这种开发乐趣的小伙伴们有到新的想法。
云服务器 GPU云服务器 大数据开发组件 intel快速存储驱动 数据库快速开发 数据库快速开发平台

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109248.html

相关文章

  • To Be Simple，基于elementUI的功能扩展组件系列1之Table篇

    摘要：项目地址前言结合日常开发，封装常用功能，提高开发效率。通用显示效果支持类型类型文本链接文档图片用法相关属性属性参数说明类型可选值默认值动画效果的列的配置对象，更多细节请参见列属性。 项目地址：tbs-ve-template 前言 结合日常开发，封装常用功能，提高开发效率。让程序猿兄弟姐妹们也有时间约约女票，逗逗男票，做做自己想做的事情，不要天天在办公室造轮子！ 1.通用Table 思路...

    superPershing 评论0 收藏0

  • 封装框架的实践

    摘要：最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于和封装的框架，集成数据存储字体图标库拓展语言网络请求等模块，为了让业务开发更专注于数据驱动。 最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于vue和elementUI封装的框架，集成 数据存储localforage、字体图标库font-awesome、css拓展语言scss、网络请求axios等模块，为了让业...

    Dogee 评论0 收藏0

  • 基于Vue,ElementUI开发的一款表单设计器

    摘要：介绍基于开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来工具地址地址特性可视化配置页面提供栅格布局，并采用实现对齐一键预览配置的效果一键生成配置数据一键生成代码，立即可运行提供自定义组件满足用户自定义 介绍 基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来 工具地址：http://to...

    DandJ 评论0 收藏0

  • Vue+ElementUI: 手把手教你做一个audio组件

    摘要：不显示下载不显示静音不显示音量条不显示进度条只能播放一个不要快进按钮例如父组件这样回雪月花青春一点点语法大多数时候，我们希望页面上播放一个音频时，其他音频可以暂停。可以把一个类数组转化成数组，这个是我常用的。 showImg(https://segmentfault.com/img/remote/1460000016177005?w=619&h=343); 目的 本项目的目的是教你如...

    U2FsdGVkX1x 评论0 收藏0

发表评论

登陆后可评论

0条评论

enrecul101

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<