1.0.0 • Published 3 years ago
@pvbpm/quick-el-drawer v1.0.0
quick el drawer
原仓库地址: https://www.npmjs.com/package/@iamgx/quick-el-drawer
在vuejs后台系统中, 经常使用到抽屉打开指定组件的操作, 每次要写一堆标签, 一堆状态控制, template显得非常臃肿, 我认为抽屉和抽屉内的业务逻辑应该是解耦的, 作为抽屉只负责展示组件, 业务都应该拆分出来 为了解决我开发中的这个痛点, 开发了快速创建抽屉的一个工具函数, 方便后台业务开发
安装
npm i @pvbpm/quick-el-drawer使用
import ElQuickDrawer from '@pvbpm/quick-el-drawer'
// 简单用法
ElQuickDrawer({ title: '这是标题', component: '这是内容' })抽屉内容
// 使用render函数渲染自定义组件
ElQuickDrawer({ title: '这是标题', component: h => h('h1', '这是内容') })
// 渲染import组件
import Example from 'path/to/example.vue'
ElQuickDrawer({ title: '这是标题', component: Example })
ElQuickDrawer({ title: '这是标题', component: require( 'path/to/example.vue').default })
// 渲染vue组件对象
const CusomComponent = { name: 'CustomCom', render: h => h('el-button', 'el button!') }
ElQuickDrawer({ title: '这是标题', component: CusomComponent })配置
- 参数传递时使用驼峰写法
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | Drawer 的标题 | string | - |
| component | Drawer显示的内容 | string/VNode/h函数 | Null |
| props | component渲染组件的时候透传给组件的参数 | object | {} |
| on | 渲染组件内部派发的事件, 通过on接收 | object | {} |
| width | Drawer 的宽度 | string | 50% |
| fullscreen | 是否为全屏 Drawer | boolean | false |
| modal | 是否需要遮罩层 | boolean | true |
| modal-append-to-body | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上 | boolean | true |
| append-to-body | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true | boolean | false |
| custom-class | Drawer 的自定义类名 | string | - |
| wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | true |
| show-close | 是否显示关闭图标 | boolean | true |
| animation | 切换全屏的时候是否需要动画 | boolean | false |
| buttons | Drawer的按钮, 为空时不显示footer | array: {text, callback, name, confirm} | [] |
| buttonLoadingKeys | 需要loading的按钮的name值 | array | [] |
| buttonDisabledKeys | 需要禁用的按钮的name值 | array | [] |
| showCancelButton | 是否显示取消按钮 | boolean | false |
live demo(结合一个打开表单并提交到后台然后关闭抽屉的一个业务场景)
