精选文章 Vue自定义控件封装---操作按钮栏的封装

Vue自定义控件封装---操作按钮栏的封装

作者:用心_承载未来 时间: 2020-08-05 03:56:49
用心_承载未来 2020-08-05 03:56:49

做过后端管理系统的“猿们”都知道,后端界面的框架无非就是左右结构【左边是菜单栏,右边是具体业务的功能界面】。但是右边的功能界面,我们又能拆分出来一些公用的控件:搜索栏、操作按钮栏、列表【table、tree、treetable】等,今天小编大致说下自定义操作按钮栏控件的封装以及实现。

首先,在做自定义控件之前,我们要想清楚我们封装自定义控件的目的,以目标为导向去实现。(以上内容纯属片汤话儿)

1.目的:实现操作按钮的公用、以及按钮权限控制

2.实现结果:



import MenuBottomToolbar from '@/layout/components/Controls/MenuBottomToolbar'

components: { MenuBottomToolbar }

以上代码是在列表页面调用MenuBottomToolbar自定义控件的核心代码,接下来重点说下MenuBottomToolbar控件的实现

3.实现逻辑

先上代码:

// 菜单按钮控件




 细心的同学,有发现在调用自定义控件的时候,有传入一个"menuclass="BASE_USERINFOLIST"",此处说下,因为系统后端是使用menuclass和menuno来确定界面上的所有按钮,然后根据权限返回用户拥有的操作按钮。而menuno属性值,直接挂在了路由上,所以我们直接用this.$route.meta.menuno来获取路由的menuno的属性值,然后通过调用后端接口获取按钮数据。

拿到后端数据,将后端数据的值赋值前端的变量。基于有时候操作按钮太多,按钮栏太长,样式太丑,所以增加了一个判断,当按钮数量大于三的时候,将多余的按钮放到更多下面,通过下来框来实现。

重点来了:因为按钮的事件都是开发人员自己去配置的,无法再控件中写死按钮的事件,所以,我们需要将按钮的事件反馈调用到对应界面上的事件实现,但是,调用自定义控件的层级我们无法确定,如果使用$emit,在调用的不是非父子级关系时就会调用不到,所以此处,我们引入了bus(中央事件总线插件),所以我们定义了一个方法callFun,参数是按钮事件名称,通过this.$bus.emit('cllFun', methodName)的形式,将事件反射到列表上调用具体方法的实现,然后在列表页面上坚挺cllFun事件

cllFun(methodName) {
      this[methodName].apply(this)
    },

这样我们就可以将各个按钮的事件调用到了具体实现。到此,操作按钮的封装基本完整

4.最终效果

Vue自定义控件封装---操作按钮栏的封装1

操作按钮按照当前用户的授权,自动生成。

同时,也请其他高高手,批评改正,目前代码已上传到git,

这是传送门:https://github.com/GitHub-chao/SuperCodeVue

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:关于Postman获取接口返回值设置为变量,提供给后续接口使用。

下一篇:leetcode-142-环形链表 II-java

您可能感兴趣

  • vue知识点总结

    # 1.ES6新增? *1、变量的改变* *let:代码块内有效;不能重复声明;不存在变量提升* *const:只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错。;* *2、模版字符串(``)* *3、函数* **1、箭头函数 (sender) => { } 箭头函数最直观的三个特点。 不需要function关键字 可以省略return关键字 继承当前上下文的this关键...

  • 掌门教育微服务体系 Solar

    点击上方蓝字,关注凌云时刻微信公众号 凌云时刻 · 技术 导读:在高速发展的时候,公司规模越来越大,老师人数越来越多,这时候公司不能铺太多人去做运营与服务,必须提高每个人效,这就需要技术驱动。因此掌门教育转变成一家技术驱动型的公司,如果被迫成为一家靠资金驱动的公司就活不下去了。——张翼(掌门教育创始人兼CEO) 联席作者 | 吴毅挺、任浩军、张彬彬、廖梦鸽、张金星、胡振建 郑重鸣谢 | Na...

  • 浅谈微服务体系中的分层设计和领域划分

    引言 看标题感觉这个东西很理论,比起“高并发、多线程”、“分布式CAP、一致性、Paxos”、“高可用SLA”等具体的干货技术点,软件体系知识显得很“湿”,似乎人人都有自己的认识,但又很少有人能说完整,有一点可以确定的是,如果你未来需要独立设计一个复杂的系统中台,并使之未来能快速应对各种需求变化的话,科学合理的领域划分和边界界定需要我们“处女座级”的坚持下去,这对防止人力失控、减少项目烂尾很...

  • GitHub 上值得收藏的 100 个精选前端项目!

    点击上方“逆锋起笔”,公众号回复 PDF 领取大佬们推荐的学习资料 来 源:https://www.jianshu.com/p/72ca8192f7b8 引言 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者简书上文章会持续更新,版权归原作者所有。 最新更新 codepen 一个在线编辑前端项目的网站,其中有一些前端大神的作品,也有很多令人惊艳的前端效...

  • 2020高压电工模拟考试题及高压电工模拟考试系统

    题库来源:安全生产模拟考试一点通公众号小程序 2020高压电工模拟考试题及高压电工模拟考试系统,包含高压电工模拟考试题答案解析及高压电工模拟考试系统练习。由安全生产模拟考试一点通公众号结合国家高压电工考试最新大纲及高压电工考试真题出具,有助于高压电工理论考试考前练习。 1、【判断题】 电弧电流的本质是离子导电。( √ ) 2、【判断题】 一般情况下是在变压器高压绕组上抽出适当的分接,进行调压...

  • 2020年iOS面试反思总结

    Object-C系列面试题总结 基础题: 1.Objective-C的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么不要在category中重写一个类原有的方法? 答: Objective-c的类不可以有多继承,OC里面都是单继承,多继承可以用protocol委托代理来模拟实现 可以实现多个接口,可以通过实现多个接口完成OC的多重继承...

  • JavaScript闭包应用介绍

    来源 | https://www.zoo.team/article/vue3-jsx 本文介绍一下js中的一个重要概念——闭包。其实即便是最初级的前端开发人员,应该都已经接触过它。 一、闭包的概念和特性 首先看个闭包的例子: function makeFab () { let last = 1, current = 1 return function inner() { [curr...

  • 「牛客网」45道JS能力测评经典题总结

    作者:Jake Zhang 原文链接:https://juejin.im/post/5f032fe3f265da22c75734b8 前言 牛客网的45道JS能力评测题个人觉得是非常好的45道js基础检测题,基本就是对自己的JavaScript基础做一个比较全面的评估,包括if语句、循环体、基础操作符、setInterval、setTimeout、流程控制、常用数组方法及es6相关(解构、M...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。