0.2.1 • Published 5 years ago
vue-fa-modal v0.2.1
vue-fa-modal
一个基于 Vue.js 与 Element-UI 的简单弹窗组件
特点：
- 基于 Element-UI 的 Dialog 对话框 进行扩展
- 集成了 拖拽、操作按钮
安装
使用 npm 或者 yarn 进行安装
$ npm install vue-fa-modal
$ yarn add vue-fa-modal如何使用
import VueFaModal from 'vue-fa-modal'<vue-fa-modal open-btn-text="点击我" @submit="submit" />参数
| 名称 | 必填 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| title | String | 弹窗 | 弹窗的标题 | |
| width | String | 95% | 弹窗宽度 | |
| disabled | Boolean | false | 禁用打开按钮、禁用 visible 事件 | |
| needOpenBtn | Boolean | true | 启用打开按钮 | |
| needFooter | Boolean | true | 启用弹窗底部按钮 | |
| btnLoading | Boolean | false | 提交按钮加载动画 | |
| openBtnText | String | 打开弹窗 | 打开按钮的文字 | |
| submitBtnText | String | 提交 | 提交按钮的文字 | |
| cancelBtnText | String | 取消 | 取消按钮的文字 | |
| openBtnSize | String | small | 打开按钮的尺寸 | |
| otherBtnSize | String | ’‘ | 其他按钮的尺寸 | |
| openBtnType | String | ’‘ | 打开按钮的类型 | |
| openBtnIcon | String | ’‘ | 打开按钮的图标 | |
| openBtnStyle | Object | {} | 打开按钮的样式 | |
| beforeOpen | Function | 空操作 | 打开按钮之前，返回 false 则不打开 |
其他属性详见 Element-UI 文档：链接
Slots
| 名称 | 描述 |
|---|---|
| - | 弹窗的内容 |
| open-btn | 打开按钮的区域 |
| title | 标题区的内容 |
| footer | 按钮操作区的内容 |
| footer-prepend | 按钮操作区，内置按钮前面 |
| footer-middle | 按钮操作区，内置按钮中间 |
| footer-append | 按钮操作区，内置按钮后面 |
事件
| 名称 | 描述 |
|---|---|
| open | 打开弹窗回调 |
| close | 关闭弹窗回调 |
| submit | 提交事件 |
方法
可以通过直接调用组件方法
| 名称 | 描述 |
|---|---|
| visible | 显示弹窗 |
| hidden | 关闭弹窗 |
| submit | 提交 |
DEMO
Author
License
Conclusion
If you think my project is good👏 . Give a Star⭐ encouragement.