精华内容
下载资源
问答
  • vue显示消息提示功能

    千次阅读 2019-10-12 11:48:36
    vue显示消息提示功能 效果图 如下所示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> ....

    vue显示消息提示框功能

    效果图 如下所示
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<style type="text/css">
    		.toast {
    			position: fixed;
    			z-index: 2000;
    			left: 50%;
    			top: 45%;
    			transition: all .5s;
    			-webkit-transform: translateX(-50%) translateY(-50%);
    			-moz-transform: translateX(-50%) translateY(-50%);
    			-ms-transform: translateX(-50%) translateY(-50%);
    			-o-transform: translateX(-50%) translateY(-50%);
    			transform: translateX(-50%) translateY(-50%);
    			text-align: center;
    			border-radius: 5px;
    			color: #FFF;
    			background: rgba(17, 17, 17, 0.7);
    			height: 45px;
    			line-height: 45px;
    			padding: 0 15px;
    			max-width: 150px;
    		}
    	</style>
    	<body>
    		<!-- 提示框 -->
    		<div id="app">
    			<div @click="binxs">
    				{{username}}
    			</div>
    			<div class="toast" v-show="toastShow">
    				{{toastText}}
    			</div>
    		</div> 
    		<script src="../js/vue.js" type="text/javascript" charset="utf-8">
    		</script>
    		<script>
    			const obj = {
    				toastShow: false,
    				toastText: '',
    				username: '显示消息提示框'
    			}
    			const app = new Vue({
    				el: '#app',
    				data: obj,
    				methods: {
    					toast(str) {
    						let v = this
    						v.toastText = str
    						v.toastShow = true
    						setTimeout(function() {
    							v.toastShow = false
    						}, 1500)
    					},
    					binxs: function(e) {
    						this.toast('显示成功')
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    

    有什么问题欢迎评论留言,我会及时回复你的

    展开全文
  • 实现功能 自定义文本 自定义类型(默认,消息,成功,警告,危险) 自定义过渡时间 使用vue-cli3.0生成项目 toast全局组件编写 /src/toast/toast.vue v-if=isShow class={ xss=removed xss=removed xss=...
  • 本文实现的功能是:有新的消息更新时,页面会播放提示音,提示的声音会播放15秒,然后停止播放,如果在停止播放之前又有新的消息进来,则会重新计时15秒。首先,添加audio标签,引入资源文件。在audio标签中存在如下...

    本文实现的功能是:有新的消息更新时,页面会播放提示音,提示的声音会播放15秒,然后停止播放,如果在停止播放之前又有新的消息进来,则会重新计时15秒。

    首先,添加audio标签,引入资源文件。

    在audio标签中存在如下属性:

    autoplay:是否音频在就绪后马上播放。

    controls:是否向用户显示控件,比如播放按钮。

    loop:是否音频结束时重新开始播放。

    preload:是否音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

    src:要播放的音频的 URL。

    HTML5 audio支持的音频格式有wav,mp3和ogg格式。

    ogg:一种新的音频压缩格式,是完全免费、开放和没有专利限制的。

    mp3:是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。

    wav:为微软公司开发的一种声音文件格式,声音文件质量和CD相差无几。

    标签是的一个子标签,作用就是用来引入多个音频,浏览器会选择一个支持的音频格式进行加载,对于不支持标签的浏览器,元素也可以作为浏览器不识别的内容加入到文档中。当有多个标签时,默认播放第一个标签。

    标签添加完毕以后,就是编写触发事件了。如今如Chrome之类的浏览器,默认情况下,声音自动播放内容会阻止。经过测试,静音的自动播放内容仍会自动播放。使用声音自动播放内容,无论是否具有可见的控件,以及是否设置为循环播放,都不会开始播放。所以我们需要在事件中主动播放音频。播放的代码如下:

    play () {this.lastRunTime =Date.now()

    let audio= document.querySelector('#audio')if (!this.isPlaying) {

    audio.play()this.isPlaying = true}

    let timeOut= setTimeout(() =>{this.stop(timeOut)

    },15000)

    },

    stop (timeOut) {this.currentTime =Date.now()

    let audio= document.querySelector('#audio')if (this.currentTime - this.lastRunTime < 15000) {

    }else{if (this.isPlaying) {

    audio.currentTime= 0audio.pause()this.isPlaying = false}

    }

    clearTimeout(timeOut)

    }

    标签中的控制函数说明:

    load():加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载

    play():加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放

    pause():暂停处于播放状态的音频、视频文件

    此处的lastRunTime用于记录最后一次触发play()方法的时间;document.querySelector('#audio')用于返回匹配指定选择器的第一个元素;isPlaying用于判断此时音频是否在播放;setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式(以毫秒为单位),返回值为该定时器的标识,此处设置15秒以后执行stop(timeOut)方法;currentTime用于记录执行stop()方法的时间,如果this.currentTime - this.lastRunTime < 15000则表明,在播放音频期间有新的消息进入,所以此时不应该停止播放,否则的话就使用audio.currentTime = 0通过赋值0使得当前播放位置清零;无论此时是否要停止播放,我们都要清除定时器,防止内存溢出clearTimeout(timeOut)。

    展开全文
  • import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Element.Message('这是一条消息提示')  
    import ElementUI from 'element-ui'
    
    import 'element-ui/lib/theme-chalk/index.css'
    
    Element.Message('这是一条消息提示')

     

    展开全文
  • 2弹出框中调用接口,并弹出消息 open2() { this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.http .post( this.GLOBAL.xgurl + “/park-api/park/deleteParkingSpace”, { id:id }, {....

    1.效果是这样的
    在这里插入图片描述
    在这里插入图片描述
    2弹出框中调用接口,并弹出消息
    在这里插入图片描述
    open2() {
    this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.http
    .post(
    this.GLOBAL.xgurl + “/park-api/park/deleteParkingSpace”,
    {
    id:id
    },
    {
    headers: {
    “Content-Type”: “application/json;charset=UTF-8”
    }
    }
    )
    .then(res => {
    console.log(res.data);
    this.$message({
    type: “success”,
    message: res.data.errorMsg,
    });
    this.handleUserList(1)
    })
    .catch(res => {
    console.log(“err”);
    });
    })
    },

    展开全文
  • vue中使用audio标签进行消息提示

    千次阅读 2019-02-22 19:48:00
    本文实现的功能是:有新的消息更新时,页面会播放提示音,提示的声音会播放15秒,然后停止播放,如果在停止播放之前又有新的消息进来,则会重新计时15秒。 首先,添加audio标签,引入资源文件。 <audio id=...
  • 前几天做了一个vue的项目, 其中有个登录拦截器的功能,根据后端返回的状态码获取登录状态, 401时,清空token 跳转登录,并打印后端返回的提示信息 正常情况是展示 今天在刷新页面时,登录过期,然后提示的信息弹出了...
  • 今天给大家分享一款超酷的多功能Vue消息弹出层组件VueSimpleAlert。vue-simple-alert 基于vue.js+sweetalert2构建的轻量级alert、confirm、prompt提示组件。支持TS调用。特性提供类似Dom window的方法:alert()、...
  • 预览 艾特开始 ...3.要实现艾特提示,输入框显示的是“@某某某”,实际发出去的消息,把@某某某转换为我们限定的某字符串,然后收到消息通过字符串匹配即可 下面,我们来一步步实现这功能吧 ...
  • 今天给大家分享一款超酷的多功能Vue消息弹出层组件VueSimpleAlert。vue-simple-alert 基于vue.js+sweetalert2构建的轻量级alert、confirm、prompt提示组件。支持TS调用。特性提供类似Dom window的方法:alert()、...
  • 只对 useDefaultValidTip=false 有效,设置校验 tooltip 提示消息的参数 Object — { offset: 10, placement: 'bottom-start' } disabledValidTip 关闭校验提示 Boolean — false autoScrollIntoView 当单元格被...
  • v-dialogs 基于 vue.js 简洁易用的弹出对话框插件,包含了 模态窗口(Modal)、消息对话框(Alert)、遮罩(Mask)、弱提示框(Toast) 等功能。安装$ npm i -S v-dialogs使用插件// 在main.js中引入import Vue from 'vue'...
  • element-ui 2.13.1 (使用到element-ui message组件,提示错误消息,如果不想安装该组件,替换编辑器中的this.$message所在行函数代码即可) 功能介绍 1、 支持不同的代码编辑模式 目前仅支持支持json, sql, ...
  • v-dialogs 基于 vue.js 简洁易用的弹出对话框插件,包含了 模态窗口(Modal)、消息对话框(Alert)、遮罩(Mask)、弱提示框(Toast) 等功能。安装$ npm i -S v-dialogs使用插件// 在main.js中引入import Vue from 'vue'...
  • element-ui 2.13.1 (使用到element-ui message组件,提示错误消息,如果不想安装该组件,替换编辑器中的this.$message所在行函数代码即可) 功能介绍 1、 支持不同的代码编辑模式 目前仅支持支持json, sql, ...
  • setTimeout在vue中的正确使用

    千次阅读 2019-06-19 13:23:28
    最近因为公司需求开发使用vue开发项目,在开发到某个表单提交功能时(提交之后先出现对应的消息提示弹窗,提示弹窗消失之后再跳转到相应的页面),使用到setTimeout函数。遇到了1个坑:
  • 消息提示框 工具提示提示框 树形菜单 表单 基础表单 表单验证 选择器 富文本编辑器 表格 基础表格 数据表格 图表基础图表 登录/登出 注册/重置密码 锁屏 错误页面 404 500 其他页面时间轴 多级菜单 换肤 文件结构 ...
  • Vue2版Cnode社区webapp

    2017-05-26 16:34:38
    2、 主要功能 1、炫酷入场动画,loading加载动画 2、权限验证,即未登录用户不能随便跳转页面(vue-router实现) ...4、自写vue插件实现全局提示和回到顶部功能 5、登录、发表话题、查看消息、查看话题等基本功
  • Vue 封装 自定义toast 插件并随处调用

    千次阅读 2019-01-01 17:09:08
    1、展示一条提示消息,显示3s 中或者其他时间后消失 2、消息为自定义消息,展示多条消息,展示最新的消息 3、可关闭当前展示的消息 开发说明 目录结构 首先在vue 项目中src 目录下,创建plugins目录,存放插件内容 ...
  • Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js ...之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较...提示错误消息: Failed to resolve filter: HomePage console错误信息...
  • console控制台调试的时候,提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因: 经过自己的摸索,后来发现竟然是代码顺序错误问题。 由于先...
  • 简易聊天室(nodejs koa + vue.js) ...制作时间:2020年7月18日 标签: nodejs koa vue.js(纯前端,非脚手架方法) ...聊天室功能包括:登录,发消息,统计在线人数,上线下线提示信息等。 线上测试地
  • 目前只完成了登录之后会实时提示谁登录,发送消息还没完成,不过经过这一天的研究,明天完成应该问题不大 知识点: Vuecli知识点 使用到的是路由的功能来实现各个页面之间的跳转,流程是点击注册,进入注册界面,...
  • 适合初学者的新手,采用djangorestframework接口开发以及模版功能开发,主要用于新手练手巩固知识点有所以导致代码臃肿,下一版本重组简化版,版本也可以升级使用django3版本,采用redis缓存等,websocket聊天等下一...
  • 模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。 概述:该组件的结构、原理与Toast 组件类似,所以这篇文章会减少组件开发的介绍,而增加一些Vue.extend、Vue生命周期相关...
  • 这是第三篇,主要讲node,webpack和vue-cli环境的搭建,使用vue全家桶,写好路由,构建静态页面,完善前端的一些功能。 本文的目录一,编写子组件1,消息提示框子组件toast 一,编写子组件 1,消息提示框子组件toast...
  • vue+electron项目中,实现系统托盘 官方描述: 用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区,通常被添加到一个 context menu 上. 用 new Tray('/path/to/my/icon'); 创建一个与image相关的...
  • 使用elementUI框架构建,用户交互细节考虑周全,让用户操作体验良好,可以加载界面,消息提示。 安全性高。文件下载非直接返回路径,或者通过对一个会过期的令牌进行签名,通过签名方式生成的令牌既不用在数据库...
  • Vary Admin:基于Vue.js的后台管理模板

    千次阅读 2018-06-15 16:58:00
    Vary Admin是基于Vue.js,搭配内置的vary-ui组件库组成的一套后台管理系统。 Github: Vary Admin 在线预览:HomePage 效果展示 功能 多样化面板 基础 栅格系统 基础样式 应用 聊天界面 邮件系统 便利签 事务...

空空如也

空空如也

1 2 3
收藏数 57
精华内容 22
关键字:

vue消息提示功能

vue 订阅