自定义了一个插件,有两个方法:
.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
- 离问题结束还有 159天20小时51分7秒
点赞 0反对 0举报 0
收藏 0
分享 4
