新建一个组件Toast.vue
<template>
<transition name="fade">
<div v-show="visible">{{message}}</div>
</transition>
</template>
<script>
export default {
data () {
return {
visible: false,
message: ''
}
}
}
</script>
<style scoped>
div {
padding: 5px 20px;
color: #fff;
background-color: #3596ff;
text-align: center;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
在main.js里面配置
import Toasts from './components/Toast'
const Toast = {
install: function (Vue) {
const ToastConstructor = Vue.extend(Toasts)
const instance = new ToastConstructor()
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
Vue.prototype.$toast = (msg, duration = 1500) => {
instance.message = msg
instance.visible = true
setTimeout(() => {
instance.visible = false
}, duration)
}
}
}
Vue.use(Toast)
在组件内调用
<template>
<div>
<button @click="onClick">1111</button>
</div>
</template>
<script>
export default {
name: "App",
components: {
},
data() {
return {
};
},
methods:{
onClick(){
this.$toast('提示内容')
}
}
};
</script>
<style lang="less">
</style>
简简单单轻提示封装
欢迎大家进群进行技术性的探讨, 群号:954314851