原生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
复制代码