Vue组件教程之Toast(Vue.extend 方式)详解

一、效果图

二、说明

这类提示框组件我们通常都会直接在 JS 代码中进行调用。像下面这样:

this.$toast('别点啦,到头啦!')

但看到网上大多数还是通过 component 方式实现的,这样的话我们在使用的时候还要在 DOM 中放置一个组件元素,然后通过一个变量来控制它的显示隐藏,这样使用起来非常的不方便。那么有什么方法可以不用在 DOM 中手动放置组件元素就可以直接调用呢?答案就是 Vue.extend。通过 Vue.extend 方式实现的组件,需要两个文件,一个是 .vue 文件,另外一个就是管理 .vue 的 .js 文件。具体代码如下:

三、代码

Toast.vue 文件代码

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

<script>
export default {
 name: 'toast',
 data () {
 return {
  message: '', // 消息文字
  duration: 3000, // 显示时长,毫秒
  closed: false, // 用来判断消息框是否关闭
  timer: null, // 计时器
  visible: false // 是否显示
 }
 },
 mounted () {
 this.startTimer()
 },
 watch: {
 closed (newVal) {
  if (newVal) {
  this.visible = false
  this.destroyElement()
  }
 }
 },
 methods: {
 destroyElement () {
  this.$destroy()
  this.$el.parentNode.removeChild(this.$el)
 },
 startTimer () {
  this.timer = setTimeout(() => {
  if (!this.closed) {
   this.closed = true
   clearTimeout(this.timer)
  }
  }, this.duration)
 }
 }
}
</script>

<style lang="scss" scoped>
.toast {
 position: fixed;
 bottom: 15vh;
 left: 28vw;
 min-width: 40vw;
 max-width: 100vw;
 font-size: 26px;
 text-align: center;
 padding: 10px 2vw;
 border-radius: 40px;
 background-color: rgba(0, 0, 0 , 0.6);
 color: rgb(223, 219, 219);
 letter-spacing: 3px;
}
</style>

Toast.js 文件代码

import Vue from 'vue'
import Toast from '@/components/layer/Toast.vue'

let ToastConstructor = Vue.extend(Toast) // 构造函数
let instance // 实例对象
let seed = 1 // 计数

const ToastDialog = (options = {}) => {
 if (typeof options === 'string') {
 options = {
  message: options
 }
 }
 let id = `toast_${seed++}`
 instance = new ToastConstructor({
 data: options
 })
 instance.id = id
 instance.vm = instance.$mount()
 document.body.appendChild(instance.vm.$el)
 instance.vm.visible = true
 instance.dom = instance.vm.$el
 instance.dom.style.zIndex = 999 + seed
 return instance.vm
}

export default ToastDialog

四、使用

首先在 main.js 中引入 Toast.js 并挂载到vue原型上,如下图:

其次,在代码中使用

this.$toast('别点啦,到头啦!')

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </styl

  • vue组件挂载到全局方法的示例代码

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像element那样可以通过this.$xxx来调用,那么问题来了,如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢. 以bootstrap-vue中的Alert组件为例,分一下几步进行: 1.定义一个vue文件实现对原组件的再次封装 main.vue <template> &

  • 深入理解Vue生命周期、手动挂载及挂载子组件

    本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip

  • vue 挂载路由到头部导航的方法

    路由是写好了,但正确的切换路由方式不应该是我们在地址栏里面输入地址,有追求的方式是点击头部的导航菜单来切换,就像这样 我们点击上面的发现.关注.消息就切换路由导航 我们先把头部的导航写好 打开header.vue 先把vue组件的基本格式写好 然后开始布局写头部 这里很不好意思,我一直以为头部的header.vue是引入了的,实际上并没有........ 打开app,vue重新编写一下 app.vue 代码: <template> <div id="app">

  • vue.extend实现alert模态框弹窗组件

    本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下 alert.js文件代码 import Vue from 'vue' // 创建组件构造器 const alertHonor = Vue.extend(require('./alert.vue')); var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alert

  • Vue.extend实现挂载到实例上的方法

    本文实例讲述了Vue.extend实现挂载到实例上的方法.分享给大家供大家参考,具体如下: 这里主要是做个笔记 根据官网的说法,Vue.extend:是使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. 官网的用法是: <div id="mount-point"></div> // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{

  • 用Vue.extend构建消息提示组件的方法实例

    前提 前段时间自己做的vue练手项目,需要一个通用的消息提示组件,但是消息提示这种组件我更想用方法来调用,而不是在各个页面上都添加个组件(那样感觉很麻烦,重度懒癌患者),于是就上网差查了查,并研究了ElementUI的message源码.自己弄出来一个简陋的消息提示组件 Vue.extend是什么 按照官方文档说法,他是一个类构造器,用来创建一个子类vue并返回构造函数,而Vue.component它的任务是将给定的构造函数与字符串ID相关联,以便Vue.js可以在模板中接收它. 了解了这点之后

  • 关于vue.extend和vue.component的区别浅析

    前言 最近一个朋友问我vue.extend和vue.component两者之间有什么区别?突然这么一问竟答不出来,回来想想有必要总结下,所以本文就来给大家介绍关于vue.extend和vue.component的区别,下面话不多说了,来一起看看详细的介绍吧. Vue.extend 返回的是一个"扩展实例构造器",也就是一个预设了部分选项的 Vue 实例构造器 var myVue = Vue.extend({ // 预设选项 }) // 返回一个"扩展实例构造器" /

  • Vue.extend构造器的详解

    Vue.extend构造器的详解 1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vue.extend返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用"扩展实例构造器"来生产组

  • vue.extend与vue.component的区别和联系

    如果大家只顾开发,对基础知识不了解,在今后的解决问题过程中,也是个大问题,今天小编抽空对基础概念给大家屡一下,用于大家日后学习. Vue.extend({})简述:使用vue.extend返回一个子类构造函数,也就是预设部分选项的vue实例构造器. 后可使用vue.component进行实例化.或使用new extendName().$mount(''+el)方式进行实例化(从而实现模拟组件). Vue.component({})简述:不多介绍了...用于生成全局组件 使用: 1,Vue.com

随机推荐