自定义 toast 组件

最新推荐文章于 2024-08-26 11:49:26 发布

Janicelily

最新推荐文章于 2024-08-26 11:49:26 发布

阅读量333

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/beth__hui/article/details/119736812

版权

vue 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

该博客介绍了如何在Vue项目中创建一个自定义的Toast组件。首先，新建了一个toast.js文件，导入Vue和toast.vue组件，然后通过Vue.extend()方法扩展组件。接着，定义了关闭Toast的功能，并创建了一个实例化并挂载到DOM的Toast方法。最后，展示了如何在项目中引入并使用这个自定义Toast组件。

摘要由CSDN通过智能技术生成

利用 Vue.extend

一、新建 toast.js 文件

import Vue from 'vue'
import ToastVue from './toast.vue';
const ToastConstructor = Vue.extend(ToastVue);

let removeDom = event => {
  event.target.parentNode.removeChild(event.target);

};
ToastConstructor.prototype.close = function() {
  this.visible = false;
  this.$el.addEventListener('transitionend', removeDom);
};

const Toast = (options = {},callback) => {
  var instance = new ToastConstructor().$mount(document.createElement('div'))
  let duration = options.duration || 2500;
  instance.message = typeof options === 'string' ? options : options.message
  instance.position = options.position || 'top'
  document.body.appendChild(instance.$el);
  instance.visible = true;
  Vue.nextTick(() => {
    instance.timer = setTimeout(function() {
      instance.close();
      callback&&callback();
    }, duration);
  })
  return instance
}


export default Toast