Vue 封装自定义toast 插件并随处调用

最新推荐文章于 2025-03-09 19:29:33 发布

Aimee芊

最新推荐文章于 2025-03-09 19:29:33 发布

阅读量6.4k

点赞数 4

分类专栏： vue 小插件文章标签： vue 封装插件 toast插件 toast插件封装 vue插件调用 Vue taost

本文链接：https://blog.youkuaiyun.com/Aimee1608/article/details/85547110

版权

toast插件功能说明

1、展示一条提示消息，显示3s 中或者其他时间后消失
2、消息为自定义消息，展示多条消息，展示最新的消息
3、可关闭当前展示的消息

开发说明

目录结构

首先在vue 项目中src 目录下，创建plugins目录，存放插件内容
── plugins
│ │ └── ToastMessage
│ │ ├── index.js
│ │ └── index.vue

.vue组件内容

承载组件的内容，在@/plugins/ToastMessage/index.vue文件里
我需要的内容不多，message 和show 来分别控制展示内容和展示与否

<template>
  <div class="toastMessageBox" v-show="show">{
  {message}}</div>
</template>

<script>
import {
    mapState} from 'vuex'
export default {
    
  name: 'toastMessage',
  data () {
    
    return {
    
      message: '',
      show: false
    }
  }
}
</script>

<style lang='less' scoped>
.toastMessageBox{
    
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: rgba