命令式组件

34 阅读1分钟
<template>
   
</template>
  
<script>
import SelectImage from '@/views/o2o/mobile/agriculture/financialService/components/selectImage.vue'
import { uploadFDFSImage, removeFDFSImg } from '@/api/o2o/file'

export default {
    name: 'main',
    props: {
   
    },
    data(){
       return {
         message: '',
         callBack: '',
       }
    },
    methods: {
        onBtn(){
           this.close();
           this.callBack('dsfds')
        },
    },

}


import Vue from 'vue';
import Main from './main.vue';
let MessageConstructor = Vue.extend(Main);

let instance;
let vm = undefined;

export function Message (options, fnc)  { 
    options = options || {};
    options.callBack = fnc
    instance = new MessageConstructor({
      data: options
    });
   
    vm = instance.$mount();
    document.body.appendChild(instance.$el);
    instance.visible = true;
    instance.close = function() {  
        document.body.removeChild(vm.$el);
        instance.visible = false;
        instance.$destroy();
        instance = null;
        vm = null;
    }
    console.log(instance);

};
   
</script>
  
<style scoped lang="scss">

</style>