Vue组件-Confirm详解

Vue组件-Confirm详解

 

原作者：爱扎马尾的小狮子

 

一、使用的地方引用，传入属性和方法

在需要的地方引入组件，然后传入对应的属性和方法

组件

使用

这种方式的问题在于在每个使用的地方都需要引用,如果组件使用频率比较多就不适合这样写，因为项目一般是会使用懒加载的，如果使用过多可以写到公共文件里边，不需要每次使用到的地方都去加载一次。

另外 如果在遇到以下情景，使用起来也会特别的不方便。在离开路由前需要弹出一个确定框，点击确定执行next(),点击取消执行next(false)，如果按照这种方式的话需要提前定义好cancelDel和doDel方法，这个时候不好把next传递给这两个方法，只能通过一个变量或熟悉把next存起来，这样使用起来也不方便，并且阅读起来也会比较困难。

 beforeRouteLeave(to, from, next) {
    this.$confirm({
                title: '',
                msg: '模式未保存，确定离开？',
                yesBtnText: "离开"
            }).then(() => {
                next();
            }).catch(() => {
                next(false);
            });
},

二、全局引入组件，使用vuex控制组件的显示

组件代码

vuex部分代码

let yesCallBack = () => {};
let noCallBack = () => {};
let alertCallBack = () => {};

export default {
state: {
    title: '',
    isShow: false,
    msg: '',
    type: 'confirm',
    hasMark: true,
    alertBtnText: '',
    noBtnText: '取消',
    yesBtnText: '确定',
},
mutations: {
    confirm(state, data) {
        Object.assign(state, {
            title: data.title,
            isShow: true,
            msg: data.msg,
            type: 'confirm',
            hasMark: data.hasMark === 'undefined' ? true : data.hasMark,
            alertBtnText: data.alertBtnText,
            noBtnText: data.noBtnText || '取消',
            yesBtnText: data.yesBtnText || '确定',
        });
        
        let yesCb = data.yesClick;
        let noCb = data.noClick;
        if (yesCb) {
            yesCallBack = yesCb;
        } else {
            yesCallBack = () => {
            };
        }
        
        if (noCb) {
            noCallBack = noCb;
        } else {
            noCallBack = () => {
            };
        }
    },
    alert(state, data) {
        Object.assign(state, {
            title: data.title,
            isShow: true,
            msg: data.msg,
            type: 'alert',
            hasMark: data.hasMark === 'undefined' ? true : data.hasMark,
            alertBtnText: data.alertBtnText,
            noBtnText: data.noBtnText || '取消',
            yesBtnText: data.yesBtnText || '确定',
        });
        
        let alertCb = data.alertClick;
        if (alertCb) {
            alertCallBack = alertCb;
        } else {
            alertCallBack = () => {
            };
        }
    },
    noClick(state) {
        noCallBack();
        state.isShow = false;
    },
    yesClick(state) {
        yesCallBack();
        state.isShow = false;
    },
    alertClick(state) {
        alertCallBack();
        state.isShow = false;
    }
}
}

使用

全局主文件写入confirm

在使用的地方写入这样调用即可

this.$store.commit('confirm', {
            title: 'title',
            msg: '是否确认删除',
            yesClick: () => {
                console.log('yes');
            },
            noClick: () => {
                console.log('no');
            }
        });

这种方式的好处是不需要每个使用的地方都引入组件，只需要在主文件引入即可。但是这个方法写的时候需要注意，在每次调用赋值的时候需要将以前所有值清空，避免属性受上次调用影响。

这种方式相对来说比较麻烦，除了维护组件以外，还要维护vuex的状态，还需要提前把模板写入页面，相对来说比较麻烦。

三、直接通过this调用promise方法的形式

这种方式实用简单，阅读起来也符合语义。
并且在未调用之前

vue文件

confirm.js

import Vue from 'vue'
import message from './message.vue'
const VueComponent = Vue.extend(message);
const vm = new VueComponent().$mount();
let init = false;
let defaultOptions = {
yesBtnText: '确定',
noBtnText: '取消'
};

const confirm = function (options) {
Object.assign(vm,defaultOptions , options,{
    type:'confirm'
});

if (!init) {
    document.body.appendChild(vm.$el);
    init = true;
}

return vm.confirm();
};

export default confirm;

全局注册

import confirm from './views/components/message/confirm'
Vue.prototype.$confirm = confirm;

使用

this.$confirm({
    title: '',
    msg: '模式未保存，确定离开？',
    yesBtnText: "离开"
}).then(() => {
    console.log('yes')
    })
   .catch(() => {
    console.log('cancel')
});

这种方式和第二中方式写的时候都要注意，每次调用有些值需要重置，因为都是全局的，共用同一个组件，避免不同地方调用相互影响。

第三种方式涉及的知识点

1.Vue.extend()

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象
.vue单文件经过webpack打包之后是一个组件示例对象，因此可以传到Vue.extend中生成一个包含此组件的类

2.new VueComponent().$mount()

new VueComponent() 创建实例，调用$mount()可以手动编译

如果.$mount('#app')有参数，表示手动编译并且挂载到该元素上。

3.$el属性 类型：string | HTMLElement

手动编译后的示例对象中存在一个$el对象（dom元素），可以作为模板被插入到页面中。

4.Vue.prototype 添加 Vue 实例方法