用原生js和vue组件写一个简单的toast

原生js

样式文件 toast.css

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 12px 16px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  z-index: 1000;
}

在toast.js文件中的代码

import './toast.css'
export function Toast(options) {
  options = options || {title: 'Toast组件', duration: 2000}
  const {title, duration} = options
  console.log(title)
  var div = document.createElement('div')
  div.classList.add('toast')
  div.innerText = title
  document.body.appendChild(div)
  var timer
  timer = setTimeout(function(){
    clearTimeout(timer)
    document.body.removeChild(div)
  }, duration)
}

vue中

新建一个Toast.vue文件

<template>
  <div class="toast">
    {{title}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      title: '',
      duration: 2000
    }
  }
}
</script>

<style>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 12px 16px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  z-index: 1000;
}
</style>

在Toast.vue同级目录新建toast.js

import Vue from 'vue'
import ToastCom from './index.vue'

const ToastConstructor = Vue.extend(ToastCom)

function Toast (options) {
  options = options || {title: 'Toast组件', duration: 2000}
  const instance = new ToastConstructor({
    data:options
  })
  const ToastDom = instance.$mount().$el
  document.body.appendChild(ToastDom)
  var timer = setTimeout(()=>{
    document.body.removeChild(ToastDom)
    clearTimeout(timer)
  }, options.duration)
}

export default Toast

在vue项目的入口文件main.js中加入如下代码，将toast函数注册到Vue原型中 这样每个组件中都可以通过this.$toast的方式调用

import Toast from './components/Toast/'
Vue.prototype.$toast = Toast

参考网络 juejin.cn/post/684490…