Vue2.x中创建Toast插件并使用

最新推荐文章于 2025-05-10 08:00:00 发布

写bug给别人改

最新推荐文章于 2025-05-10 08:00:00 发布

阅读量1.8k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_46258925/article/details/123479687

版权

本文档介绍了如何在Vue2.x中创建并使用Toast插件。首先在项目中创建一个toast文件夹，包含index.js和Toast.vue组件。然后在main.js中导入Toast组件，并在代码中调用以展示提示信息。最后展示了使用后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.首先创建toast文件夹

文件夹里有Toast.vue文件 和index.js文件

1.index.js如下

import Toast from "./Toast";

const obj = {}

obj.install = function (Vue){

  //1.创建组件构造器
  const Construct = Vue.extend(Toast);

  //2.用new 的方式用组件构造器创建出来组件对象
  const toast = new Construct();

  //3.将组件对象手动挂载到某一个元素上
  toast.$mount(document.createElement('div'))


  //4.toast.$el对应的就是div
  document.body.appendChild(toast.$el)

  //5.在原型中加入Toast
  Vue.prototype.$toast = toast;

}

export default obj;

2.Toast.vue

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

<script>
export default {
  name: "Toast",
  props:{

    message:{

      type:String,
      default:''

    },
    isShow:{

      type:Boolean,
      default: false

    }

  },
  methods:{

    show(message,time = 1000){

      this.isShow = true;
      this.message = message;

      console.log("使用的是通过插件形式的Toast");

      setTimeout(()=>{

         this.isShow = false;
         this.message = '';

      },time)

    }

  }

}
</script>

<style scoped>

  .toast{


    background: rgba(0,0,0,0.5);
    font-size: 20px;
    border-radius: 10px;
    padding: 8px 10px;
    color: white;
    position: fixed;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;

    transition: all 3s;

  }

</style>

二、使用方法

1.首先在main.js中导入该组件


//import toast from "Toast的文件目录"
import toast from "./components/common/toast"  //我的toast文件目录

//1.安装该插件
Vue.use(toast);

2.在代码中使用


直接在Vue文件的任意方法中以下语句即可使用

this.$toast.show("这里写入展示的信息");

3.使用效果

在这里插入图片描述