vue自定义插件,该如何改进代码

自定义了一个插件,有两个方法:
.show()创建插件并显示
.hide()销毁指定插件

代码:

toast/toast.vue

<template>
    <div id="toast">
        <p v-show="show">
            {{msg}}
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: ''
        }
    }
}
</script>

toast/index.js

import ToastComponent from './toast.vue'

const Toast = {}

// 注册Toast
Toast.install = (Vue) => {

    const ToastConstructor = Vue.extend(ToastComponent)

    Vue.prototype.$toast = {
        show(msg) {
            const instance = new ToastConstructor()
            instance.$mount()
            document.body.appendChild(instance.$el)

            instance.show = true
            instance.msg = msg
            //这里return整个实例感觉不太好,不知如何改进
            return instance
        },
        hide(instance) {
            instance.$destroy()
            document.body.removeChild(instance.$el)
        }
    }
}

export default Toast

其他组件中使用:

let t1 = this.$toast.show('msg') //显示
this.$toast.hide(t1) //销毁

let t2 = this.$toast.show('msg2') //显示
this.$toast.hide(t2) //销毁

现在我有点不解的是,在show()方法中我选择return整个实例来达到调用hide()方法的时候可以传入这个实例,然后在hide()方法中调用实例的$destroy()进行销毁。

但是我总觉得直接return整个实例的做法好像不太好,所以想请问下我这个代码该如何改进一下?

待解决 悬赏分:40 - 离问题结束还有 341天23小时5分41秒
反对 0举报 0 收藏 0

我来回答

回答2