vue 函数式指令调用组件

第一种方式使用render

import Vue from 'vue'
import store from '../../../src/store'
import selectSign from '@/components/selectSignatory/selectSignatory.vue'
function signatoryShow(data={width:"",title:'',success,fail}){
    let SelectSignCom = new Vue({
        store:store,//这里需要注入store，否则组件内无法使用mapGetters
        render: (h) => {
            return h(
                selectSign, {
                    props: {
                        width: data.width,
                        title:data.title,
                        close:function(){
                            console.log('取消',SelectSignCom);
                            SelectSignCom.$el.remove()
                        },
                        cancel:function(){
                            let result={
                                cancel:true,
                                data:''
                            }
                            success&&success(result)
                        },
                        confirm:function(){
                            let result={
                                confirm:true,
                                data:''
                            }
                            success&&success(result)
                        },
                    },
                    
                }
            )
        }
    }).$mount()
    document.body.appendChild(SelectSignCom.$el)
    SelectSignCom.$children[0].show()
    
}

export default {
    signatoryShow
}

第二种方式使用extend

import Vue from 'vue'
import store from '../../../src/store'
import selectSign from '@/components/selectSignatory/selectSignatory.vue'
function signatoryShow(data={width:"",title:'',success,fail}){
    //拿到组件的构造函数
    let SelectSign = Vue.extend(selectSign);
    //拿到组件的实力,这里需要注入store，否则组件无法使用mapGetters
    let  SelectSignCom = new SelectSign({
        store:store,
    }).$mount()
    document.body.appendChild(SelectSignCom.$el)
    SelectSignCom.show()
    SelectSignCom._props.close=function(){
        SelectSignCom.$el.remove()
    }
    SelectSignCom._props.confirm=function(){
        let result={
            confirm:true,
            data:''
        }
        success&&success(result)
    }
    SelectSignCom._props.cancel=function(){
        let result={
            cancel:true,
            data:''
        }
        success&&success(result)
    }
    console.log(data);
    SelectSignCom._props.width=data.width
    SelectSignCom._props.title=data.title
    
}

export default {
    signatoryShow
}