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


Posted in Javascript onJanuary 27, 2019

一、效果图

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原型上,如下图:

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

其次,在代码中使用

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

总结

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

Javascript 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
JS开发常用工具函数(小结)
Jul 04 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 #Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 #Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 #Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 #Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 #Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 #Javascript
vue-cli构建vue项目的步骤详解
Jan 27 #Javascript
You might like
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php生成圆角图片的方法
2015/04/07 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
Javascript开发包大全整理
2006/12/22 Javascript
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
jsTree使用记录实例
2016/12/01 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
深入学习python的yield和generator
2016/03/10 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
护士实习自我鉴定
2013/10/22 职场文书
实验室标语
2014/06/21 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
大学生在校表现评语
2014/12/31 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫