基于Vue封装API形式的组件

Question

需求：封装一个弹窗组件。

遇到的问题：

1. 传统的封装方式使用时需要在每个使用的页面，引入组件，注册组件，绑定参数

这种方式使用起来相当繁琐，因为每次使用都需要重复步骤，因此有了下面这样的想法，将方法挂载到vue原型，需要使用的时候。调API就行了，但是遇到了一些问题，上代码

问题描述

封装一个弹窗组件。

问题出现的环境背景及自己尝试过哪些方法

传统的封装方式使用时需要在每个使用的页面，引入组件，注册组件，绑定参数

相关代码

import vue from 'vue'

// 导入组件
import Toast from './toast.vue'

// 生成一个扩展实例构造器
const ToastConstructor  = vue.extend(Toast)

//定义一个变量用于保存vue实例
let  _Toast = {}

//定义弹窗的函数 接收两个参数  title  message
const showToast =  (option)=>{
    //实例化构造器
    _Toast = new ToastConstructor({
       data(){
           return{
               showToast:true,
               title:option.title,
               message:option.message
           }
       } 
    }) 

// 生成模板
 const element = _Toast.$mount().$el
 console.log(_Toast.showToast)

// 如何防止重复添加节点？
 document.body.appendChild(element)
}
}


//定义隐藏弹窗的函数
const hideToast =  () => {
    _Toast.showToast = false
}


showToast.install = Vue =>{
    Vue.prototype.$toast = showToast
}

hideToast.install = Vue=>{
    Vue.prototype.$hideToast = hideToast
}

//导出
export {showToast,hideToast} 

你期待的结果是什么？实际看到的错误信息又是什么？

理想状态是能够像element message 弹窗那样通过API调用

实际的问题：

项目结构及代码截图

坐等大佬教学一波封装方式，或者给出一些资料（百度的已经找了）

Answer 1

给你写个示例作为参考思路

// toast.js
export const Toast = {
  name: 'toast',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  render (h) {
    return h('div', {
      style: {
        backgroundColor: 'rgba(0,0,0,0.3)',
        color: '#fff',
        width: 'fit-content',
        padding: '.5rem',
        borderRadius: '6px',
        marginBottom: '1rem'
      }
    }, this.title)
  }
}

export default {
  install (vue, config) {
    const ToastComponent = vue.extend(Toast)
    vue.prototype.$toast = function (title) {
      const instance = new ToastComponent({ propsData: { title } })
      const anchor = document.createElement('div')
      window.document.body.appendChild(anchor)
      instance.$mount(anchor)
      setTimeout(() => {
        window.document.body.removeChild(instance.$el)
        instance.$destroy()
      }, 1500)
    }
  }
}

使用

// main.js
import Toast from './toast'
Vue.use(Toast)

// 代码中
this.$toast('hay man!')

Answer 2

之前参考过这一篇文章：
https://zhuanlan.zhihu.com/p/...
写过 loading 组件

防止重复添加的实现大概就是用一个 ref 和一个全局boolean called 来做的

Answer 3

正好之前自己封装过toast弹窗，简直手摸手文章。

Vue 封装Toast消息提示
https://segmentfault.com/a/11...

都配有GitHub地址

Answer 4

自己封装的，https://github.com/ZFCFBGC/vue2.96_demol
仅供参考