Vue封装全局toast组件的完整实例

目录
  • 前言
  • 一. 借助 vue-cli
    • 1. 定义 Toast 组件
    • 2. 在 main.js 里面配置
    • 3. 在其他组件内使用
  • 二、不借助 vue-cli
    • 1. 注册 toast 组件
    • 2. 注册 toast 插件
    • 3. 在其他组件内使用
  • 总结

前言

最近体验了下Vue，Toast都是前端常用组件，本文详细介绍了Vue封装全局toast组件的过程，下面话不多说了，来一起看看详细的介绍吧

一. 借助 vue-cli

1. 定义 Toast 组件

// components/Toast

<template>
  <transition name="fade">
    <div v-show="visible">{{message}}</div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      message: ''
    }
  }
}
</script>

<style scoped>
div {
  position: fixed;
  top: 30%;
  left: 50%;
  padding: 5px 20px;
  color: #fff;
  background-color: #424242;
  border-radius: 5px;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* vue动画过渡效果设置 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

2. 在 main.js 里面配置

import Vue from 'vue'
import App from './App.vue'
import Toast from './components/Toast'

// 定义插件对象
const ToastObj = {
  install: function (Vue) {
    // 创建一个Vue的“子类”组件
    const ToastConstructor = Vue.extend(Toast)
    // 创建一个该子类的实例,并挂载到一个元素上
    const instance = new ToastConstructor()
    console.log(instance)
    // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    // 在Vue的原型链上注册方法，控制组件
    Vue.prototype.$toast = (msg, duration = 1500) => {
      instance.message = msg
      instance.visible = true
      setTimeout(() => {
        instance.visible = false
      }, duration)
    }
  }
}
Vue.use(ToastObj)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在其他组件内使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      msg: 'HelloWord'
    }
  },
  mounted () {
  	// 使用 toast 组件
    this.$toast('组件挂载成功')
  }
}
</script>

二、不借助 vue-cli

在借助 vue-cli 的情况下，可以方便实现组件的导入导出，但是在不借助构建工具的情况下，就需要使用其他方法了

1. 注册 toast 组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/vue/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <my-button></my-button>
  </div>
  <div id="toast"></div>
  <script>
    // 定义 toast 全局组件
    const Toast = Vue.component('toast', {
      data() {
        return {
          isShow: false,
          message: '全局提示',
          wrapperStyle: {
            position: 'fixed',
            top: '20%',
            left: '50%',
            zIndex: 10000,
            padding: '6px 12px',
            backgroundColor: '#424242',
            borderRadius: '5px',
            transform: 'translate(-50%, -50%)'
          },
          textStyle: {
            color: '#fff',
            fontSize: '14px'
          }
        }
      },
      template: `<div v-show="isShow" :style="wrapperStyle">
                  <span :style="textStyle">{{ message }}</span>
                </div>`
    })

2. 注册 toast 插件

// 定义插件对象
const ToastObj = {
  install: function (Vue) {
    // 创建一个 toast 组件实例,并挂载到一个元素上
    const instance = new Toast()
    // 将这个实例挂载到DOM中
    instance.$mount('#toast')

    // 在Vue的原型链上注册方法，控制组件
    Vue.prototype.$toast = ({message, duration = 2000} = {}) => {
      instance.message = message
      instance.isShow = true

      setTimeout(() => {
        instance.isShow = false
      }, duration)
    }
  }
}
// 注册 toast 插件
Vue.use(ToastObj)

3. 在其他组件内使用

    Vue.component('my-button', {
      data() {
        return {
          wrapperStyle: {
            width: '70px',
            padding: '20px',
            backgroundColor: 'green'
          },
          textStyle: {
            color: '#fff',
            fontSize: '16px'
          }
        }
      },
      methods: {
        handleClick() {
          this.$toast({
            message: '我点击了'
          })
        }
      },
      template: `<div :style="wrapperStyle" @click="handleClick">
                  <span :style="textStyle">点击提示</span>
                </div>`
    })

    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

总结

到此这篇关于Vue封装全局toast组件的文章就介绍到这了,更多相关Vue封装全局toast组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue封装的组件全局注册并引用

    Vue封装的组件全局注册并引用

    当vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情. 每当我们需要修改的时候,只需维护那一个功能性组件即可,不需要这个功能了,只需要从页面中删除这个组件的引用即可. 那么废话不多说了,我们来看看如何全局注册并一键引入(类似于element ui的全部引入). 如何封装组件就不多赘述了. 参考vue官网的做法:vue官网全局注册 1.正则判断路径以及文件名,获取全部组件并全局注册(可以直

  • Vue封装全局toast组件的完整实例

    目录 前言 一. 借助 vue-cli 1. 定义 Toast 组件 2. 在 main.js 里面配置 3. 在其他组件内使用 二.不借助 vue-cli 1. 注册 toast 组件 2. 注册 toast 插件 3. 在其他组件内使用 总结 前言 最近体验了下Vue,Toast都是前端常用组件,本文详细介绍了Vue封装全局toast组件的过程,下面话不多说了,来一起看看详细的介绍吧 一. 借助 vue-cli 1. 定义 Toast 组件 // components/Toast <temp

  • Vue自定义全局Toast和Loading的实例详解

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排). (1). toast.vue <template lang="html"> <div v-if="isShowToast" class="toa

  • Vue封装通用table组件的完整步骤记录

    Vue封装通用table组件的完整步骤记录

    目录 前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个比较俗的例子:可以多选的下拉菜单,带输入的对话框,日期选择器等等,于是我们会想办法将这些共有的功能抽取成一个个公共组件,以便能够在不同的页面或业务中使用. 为什么需要封装table组件? 后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改.便于后期维护.如给ta

  • vue使用Vue.extend创建全局toast组件实例

    目录 Vue.extend创建全局toast组件 关于vue.extend的理解应用 基本概念 官网基本示例 应用 总结 Vue.extend创建全局toast组件 src -> components -> Toast -> toast.vue <template>   <transition name="fades">     <div class="Errormes"  v-if="show"&

  • vue extend+promise封装全局弹窗组件

    vue extend+promise封装全局弹窗组件

    本文实例为大家分享了vue extend+promise封装全局弹窗组件的具体代码,供大家参考,具体内容如下 因为项目没有引入第三方UI库,所以所有的公共组件都需要自己封装现在需要一个全局的弹窗,要有promise异步处理 实现后的效果 // components/confirm文件 <template>   <div class="popup-wrap" v-if="showPopup">     <div class="p

  • Vue封装全局过滤器Filters的步骤

    (PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project) 在前后端分离的项目中,经常会有后台返回的数据需要经过处理才能显示到页面上的场景. 使用最多的场景就是日期/时间.数字.字符串的格式化处理,实际业务中可能还有更复杂的数据处理逻辑. 下面就拿封装全局的处理数字和字符串的 filter 来展示 vue 如何 封装全局filter 并统一处理. 一.定义/封装过滤器 在 src目录 下新建 filters目录 用来专门存放全局过滤器,如果项

  • vue 封装面包屑组件教程

    我看过一篇关于程序员写博客的文章,他说很多的程序员过了两年写了很多的代码,但是回想起来自己具体做了哪些技术点,遇到坑几乎没有印象,所以说文字是记录的最好方式,好记性不如烂笔头,可以方便自己以后查看,在写的过程中也会再加深一遍印象,我也来折腾折腾. 第一次写文章就写一个比较有意义的吧,18年四月末来到目前所在的这家公司,熟悉了一周环境和代码后,新的任务就是使用vue+element-ui来重构之前老版本的项目,我主要负责就是用户管理的一个模块,因为之前没有用过vue所以恶补了一周的vue了解了一些

  • vue封装自定义分页器组件与使用方法分享

    前言 分页是开发各种系统时候最常用的功能,下面为本人封装的一个分页组件. 实现分页器操作需要以下参数 当前页: pageNo 每页展示条数: pageSize 数据总条数 : total 连续页码数:continues (一般为奇数,页面对称更美观) 分页器在各大项目中出现的频率较多,我们可以封装成静态组件,并全局注册这个组件. 1.全局注册组件方法:在mian.js文件中操作 import Pagination from '@/components/Pagination' // 组件路径 Vu

  • vue封装一个弹幕组件详解

    vue封装一个弹幕组件详解

    目录 前言 功能实现 1.获取随机颜色 随机数生成 随机颜色编码生成 2.随机生成弹幕出现的高度坐标 3.格式化弹幕对象 颜色 定位 4.创建弹幕对象 滚动动画定义 创建弹幕dom对象实例 弹幕销毁 弹幕循环 5.实时弹幕发送 html JavaScript 源码地址 前言 现在很多地方都有使用到弹幕,最近在捣鼓自己的个人博客网站,也想着在里面加入一个弹幕模块,所以在这里封装了一个可复用的弹幕组件,目前已经实现了基本的功能,可能还会有存在缺陷,后续会继续优化.这里给大家介绍分享一下实现的过程.

  • vue实现自定义日期组件功能的实例代码

    vue实现自定义日期组件功能的实例代码

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calendar_header">' + '<div class="prev" @click="prevMonth"> < </div>' + '&l

随机推荐