按钮的简单封装

根据公司业务的需要,发现一些静态的功能总是发生历史上的相同,于是进行简单的封装,因为不涉及接口数据渲染,采用对象静态渲染的方式

先看看公司的业务大概是什么样子

按钮的简单封装_第1张图片

这里使用的是ant design vue的组件库,然后看看原本的组件编写方式,存在着普通的按钮点击事件还存在下拉选择组件

新增 修改 删除 更多 启用 禁用 审核通过 审核不通过

于是乎就出现了优化(懒人手段)个人觉得至少方便了许多,先上源码,因为未接触jsx语法这里就暂时使用vue的方式进行封装




然后根据eleui源码的注册组件方式进行组件注册,这里可以去GitHub下载eleui的源码看看,eleui的源码是使用vue来编写的,易学易懂

import asButtonList from './asButtonList.vue';
    asButtonList.install = (Vue) => {
        Vue.component(asButtonList.name, asButtonList);
    };
export default asButtonList;

注册后要使用的时候记得导入组件,公司一半也会存在一个自己的公共组件,这里是在全局进行添加的,普通引用方法就不在这里写入了

// 记得导入组件然后使用
// 按钮批量渲染
// import asButtonList from '../components/asButtonList';
// Vue.use(asButtonList)

看看组件效果




当然组件因人而异,业务还存在的一个功能---点击删除的时候需要弹出确认框二次确认的操作,暂时没时间完善

按钮的简单封装_第2张图片

在点击事件那里还有个想法,如果click事件不是传的函数传的是对象或者是数组然后进行数据处理再发送出去,也是想法暂未实现

有想法或者建议可以留言完善

 

你可能感兴趣的:(按钮的简单封装)