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 自定义带默认值的函数
Jul 21 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP多文件上传类实例
2015/03/07 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
[JS]点出统计器
2020/10/11 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python深入学习之装饰器
2014/08/31 Python
python获取mp3文件信息的方法
2015/06/15 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
基于Django用户认证系统详解
2018/02/21 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
法律进社区实施方案
2014/03/21 职场文书
婚礼新人答谢词
2015/01/04 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
Linux安装Docker详细教程
2022/07/07 Servers