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.