Vue2对话框新方式调用

没错，还在用老掉牙的Vue2.

直接看调用方式吧：

this.$fcd.create(require("./b.vue"), {
    title: "哈哈",
    fcMethod: {
        success() {
            console.log(123)
        }
    }
})

即可，这样调用如此简单。

仅需如下两步：

1. 下载库代码
2. 导入并use插件

   import FCDialogPlugin from './plugins/FCDialog'
   Vue.use(FCDialogPlugin)
   

3. 在App.vue定义容器

   <template>
     <div id="app">
       ...
       <FCDialog :global="true"></FCDialog>
     </div>
   </template>
   

当然，FCDialog也可以当默认的el-dialog使用.

好处当然是不需要另外创建，可以完美使用框架内的一切

源码：

• index.js

import FCDialog from './index.vue'

export default {
  install(Vue, options) {
    if (Vue.prototype.$fcd) {
      return console.error('Vue.prototype.$fcd has already been used')
    }
    Vue.prototype.$fcd = {
        create(){
            console.error('FCDialog未定义，请放置全局FCDialog组件')
        }
    }
    Vue.component('FCDialog', FCDialog)
  }
}

• index.vue

<template>
    <el-dialog :visible.sync="isOpen" v-bind="dialogAttrs" v-on="$listeners">
        <FC v-if="isRender && !isChange" ref="fc" v-bind="fcProps" v-on="fcMethod"></FC>
        <template v-else>
            <template v-for="(slotName) in Object.keys($slots)" :slot="slotName">
                <slot v-if="slotName === 'default'"></slot>
                <slot v-else :name="slotName"></slot>
            </template>
        </template>
    </el-dialog>
</template>

<script>

function getModule(m) {
    return m.default || m
}

export default {
    props: {
        global: {
            default: false,
            required: false
        }
    },
    inheritAttrs: false,
    data() {
        return {
            dialogTitle: "",
            isOpen: false,
            isRender: true,
            isChange: false,
            fcProps: {},
            fcMethod: {},
        }
    },
    computed: {
        dialogAttrs() {
            let extendAttrs = {}
            if (this.dialogTitle) {
                extendAttrs.title = this.dialogTitle
            }
            return {
                ...(!this.isRender ? this.$attrs || {} : {}),
                ...extendAttrs,
            }
        }
    },
    methods: {
        open() {
            this.isRender = false
            this.dialogTitle = ""
            this.isOpen = true
        }
    },
    created() {
        if(!this.global) return
        this.constructor.component("FC", { render(h) { return h() } })
        this.$fcd._uid = this._uid
        this.$fcd.create = (comp, attrs = {}) => {
            this.dialogTitle = attrs.title || ""
            if (this.comp === comp) {
                return
            }
            this.isRender = true
            if (attrs.props) {
                this.fcProps = attrs.props
            }
            if (attrs.fcMethod) {
                this.fcMethod = attrs.fcMethod
            }
            if (typeof comp === "object") {
                comp = getModule(comp)
            }
            this.constructor.component("FC", comp)
            this.comp = comp
            this.isChange = true;
            this.$nextTick(() => {
                this.isChange = false
                this.isOpen = true
            })
        }
    },
}
</script>