对于新手们来说，如何写一个可以多用的组件，还是有点难度的，组件如何重用，如何传值这些在实际使用中，是多少会存在一些障碍的，所以今天特意写一个最常用的模态框组件提供给大家，希望能帮助到您！
懒癌患者直接复制粘贴即可
Modal.vue组件
<!-- 过渡动画 --><!-- 关闭模态框事件 和 控制模态框是否显示 --> 
<!-- 模态框内容文字 可有可无 --><!-- 状态提示文字的插槽 --> {{statusText}} <!-- 模态框按钮 可选单个确定按钮 和 两个确定、取消按钮 --> <!-- 单个确定按钮 -->
- 确定
<!-- 确定和取消按钮 -->
新建一个index.js文件，在其中全局引入组件，全局引入之后，就不用在每个调用的组件里面单独引入了，可以直接使用
import Modalfrom "./Modal.vue";const components = { install: function (Vue) {
Vue.component('Modal', Modal);
}
}//导出组件export default components;
Index.vue中调用
<!-- 提交成功模态框 --><!-- :payMoney="payMoney" yuan="元" -->
效果如图
模态框-1.gif
如果只需要一个确定按钮，只需要在调用的时候，这么写就好了
<!-- 提交成功模态框 -->
如图
模态框-2.gif
可能并不是特别完美，如果您发现有缺点，还请不吝赐教！
作者：刘员外__
链接：https://www.jianshu.com/p/3fc8d4a29ff1
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/3373/viewspace-2814877/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
Android Bitmap知识梳理
下一篇：
浏览器的强缓存和对比缓存，了解一下？
请登录后发表评论
登录
全部评论
