用vue/react写一个全局提示弹框

vue的实现方法

1、写一个Toast组件

Toast.vue

组件中除了拥有是否展现自身的show属性以外其他属性都没有被定义，这些属性将在下面的toast.js中通过Vue.extend出来的实例构造器的实例化对象传入。

Vue.extend 返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器

var myVue = Vue.extend({
 // 预设选项 -- 等下我们会把Toast组件作为预设传入
}) // 返回一个“扩展实例构造器”
 
// 然后就可以这样来使用
var vm = new myVue({
 // 其他选项
})

2、 写一个toast.js

toast.js

import Toast from './Toast.vue'
import Vue from 'vue'
let ToastCmp = Vue.extend(Toast)

function toast(options) {
  let div = document.createElement('div')
  document.body.appendChild(div)
  let { title, content, btn, callback } = options || {}
  new ToastCmp({
    data() {
      return {
        title: title || "Tips",
        content: content || "contents here",
        btn: btn || "confirm",
        callback: () => {
          callback && callback instanceof Function && callback()
          this.show = false
        }
      }
    }
  }).$mount(div)
}

export default {
  install: (Vue) => {
    Vue.prototype.$toast = toast
  }
}

3、将toast方法挂载上Vue的原型然后调用即可

react的实现方法

1、写一个toast.js

样式与vue的一样，此处省略

toast.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Toast extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    const { title, content, btn, callback } = this.props
    return (
      

        

          
{title}
          
{content}
          
{btn}
        
      
    )
  }
}

export default options => {
  let { title, content, btn, callback } = options || {}
  let div = document.createElement('div')
  document.body.appendChild(div)
  ReactDOM.render(React.createElement(Toast, {
    title: title || "Tips",
    content: content || "contents here",
    btn: btn || "confirm",
    callback: () => {
      callback && callback instanceof Function && callback()
      document.body.removeChild(div)
    }
  }), div)
}

2、引入调用即可