添加自定义vue全局方法，同时给自定义的方法传递component调用其方法

项目中会遇到一个组件/方法， 在多个地方被调用，比较方便的的方式之一，this.$custom(agruments) 这样就比较方便

，不然用组件引入的办法调用就就比较麻烦，每可能都需要这样调用

import coustom from './coustom'
export default {
	components: {
		coustom
	}
}

就这么一句就调用出来
this.$alert('哈哈哈');

alert.vue 如下

function install(Vue) {
    
    Object.defineProperty(Vue.prototype, '$alert', {
        get() {
            let div = document.createElement('div')
            document.body.appendChild(div);
            return (message) => {
                const COnstructor= Vue.extend(Alert)
                let Instance = new Constructor({
                    data() {
                        return {
                            message: message,
                            show: true
                        }
                    }
                }).$mount(div);
            };
        }
    });
}

export default install

最后vue.use 一下

import alert from 'index'

Vue.use(alert)

当然前面有个坑 transition 的 vue 的过渡 alert的div不是一开始就加载到文档上的，通过后面的 

 document.body.appendChild(div);

动态写入，就造成 alert 显示时看不到transition效果，抛开vue来说也会遇到这样的情况 可以settimeout 下 给append的元素 addClass

同理在vue 中也可以，当然还有更好的办法暂时没想到。。。。

alert 只是纯的 传递一个param 但是需要 传递一个function 时，比如confirem

this.$confirm('请确定你是傻逼'， () => console.log('yes')})

还是相同的味道，相同的道理

Confirm.vue

import Confirm from './Confirm.vue'

function install(Vue) {

    Object.defineProperty(Vue.prototype, '$confirm', {
        get() {
            let div = document.createElement('div')
            document.body.appendChild(div);
            return (message, confirmSure) => {
                const COnstructor= Vue.extend(Confirm)
                const Instance = new Constructor({
                    data() {
                        return {
                            message: message,
                            show: true
                        }
                    },
                    methods: {
                        confirmSure: confirmSure    //确定方法
                    }
                }).$mount(div);
            };
        }
    });
}

export default install

import alert from 'index' Vue.use(alert)

 this.$confirm('你是猴子请来的唐僧么', () => console.log('yes,哈哈哈哈哈'))

传了两个arguments，累了吧，轻松点，

片分三级，嗯········参数也得 至少能传 三个。。。。

嗯，往哪里看呐···！

这里传递的params 才传递到第二个，才实现第二个功能，要么要实现第三个功能呢，dialog对话框内容，根据环境应用环境传递进去显示 

 

        

            1+1=？
            

                
                
请输入答案
            
        
    

export default {
    name: 'oneaddone',
    data() {
        return {
            input: {
               
                value: null
            }
        }
    }
}

import dialog from './dialog.vue'

function install(Vue) {
    Object.defineProperty(Vue.prototype, '$dialog', {
        get() {
            let div = document.createElement('div');
            document.body.appendChild(div);
            return (message, modalBody) => {
                const COnstructor= Vue.extend(dialog)
                const Instance = new Constructor({
                    data() {
                        return {
                            message: message,
                            show: true,
                            modalBody: modalBody
                        }
                    }
                }).$mount(div)
                return Instance.setSubmit  //放回 一个方法用于 传递 自定义的数据和 submit 时方法
            };
            
        }
    });
}

export default install

this.$dialog('请计算下面的数学题', resolve => 
                require(['./oneaddone.vue'], resolve))('input', (data) => {
		this.$alert('哈哈哈，正确')
                    console.log(data)
                    return data
                }
            )