首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue显示消息提示框功能

vue实现显示消息提示框功能

2024-04-27 15:20:22 作者：换日线°

这篇文章主要介绍了vue实现显示消息提示框功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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消息提示通知的几种方式汇总

Vue 消息提示通知组件（Message /Notification）是我们日常开发中经常使用的组件，它可用作与用户交互的反馈提示，信息提交成功、错误、操作警告等场景使用。

原生JavaScript 提供了 alert、prompt、confirm 等方法

提示框1=>Message.error

import { Message } from “element-ui”;

Message.error('该金额区间不存在，请检查后重新输入')

提示框2=>success

 Message({
            type: 'success',
            message: '删除成功!',
          })

提示框3=>error

 Message({
          type: 'error',
          message: '你不是上传用户，无法进行文件修改！',
        })

提示框4=>warning

Message({
          type: 'warning',
          message: '暂不支持该类型文件预览!目前支持图片与word、pdf、excel、图片、txt等文件预览！',
        })

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。