详解如何用VUE写一个多用模态框组件模版

对于新手们来说，如何写一个可以多用的组件，还是有点难度的，组件如何重用，如何传值这些在实际使用中，是多少会存在一些障碍的，所以今天特意写一个最常用的模态框组件提供给大家，希望能帮助到您！

懒癌患者直接复制粘贴即可

Modal.vue组件

新建一个index.js文件，在其中全局引入组件，全局引入之后，就不用在每个调用的组件里面单独引入了，可以直接使用

import Modalfrom "./Modal.vue";
const components = {
  install: function (Vue) {
    Vue.component('Modal', Modal);
  }
}
//导出组件
export default components;

Index.vue中调用

效果如图

模态框-1.gif

如果只需要一个确定按钮，只需要在调用的时候，这么写就好了

如图

模态框-2.gif

可能并不是特别完美，如果您发现有缺点，还请不吝赐教！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。