如何用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

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

你可能感兴趣的:(如何用VUE写一个多用模态框组件模版)