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

demo link

Author

Blog · GitHub @gd4Ark

License

MIT

Conclusion

If you think my project is good👏 . Give a Star⭐ encouragement.