vue实现显示消息提示框功能
更新时间：2024年04月27日 15:20:21 作者：换日线°
这篇文章主要介绍了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等文件预览！',
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在组件中修改 Vuex 中的 state,根据使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但总体思路都是借助 Vuex 提供的 mutations 或 actions 来实现,以下分别介绍两种版本下的具体实现方法,需要的朋友可以参考下2025-02-02![Vuex报错之[vuex] unknown mutation type: handlePower问题及解决](//img.jbzj.com/images/xgimg/bcimg1.png)
Vuex报错之[vuex] unknown mutation type: han
这篇文章主要介绍了Vuex报错之[vuex] unknown mutation type: handlePower问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本篇文章主要介绍了详解vue-admin和后端(flask)分离结合的例子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
如何在Vue3和Vite项目中用SQLite数据库进行数据存储
SQLite是一种嵌入式关系型数据库管理系统,是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎,这篇文章主要给大家介绍了关于如何在Vue3和Vite项目中用SQLite数据库进行数据存储的相关资料,需要的朋友可以参考下2024-03-03
最近项目结束，空闲时间比较多，今天小编抽时间给大家使用vue写一个小例子，就决定做验证码倒计时功能，具体实例代码大家参考下本文2018-04-04
这篇文章主要介绍了Vue 匿名、具名和作用域插槽的使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
vue+canvas如何实现根据数据展示不同高度,不同渐变颜色的长方体效果
这篇文章主要介绍了vue+canvas如何实现根据数据展示不同高度,不同渐变颜色的长方体效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
这篇文章主要为大家详细介绍了如何通过vue elementUI实现拖拽流程图效果,不引入插件,纯手写实现,感兴趣的小伙伴可以跟随小编一起学习一下2025-01-01
使用elementuiadmin去掉默认mock权限控制的设置
这篇文章主要介绍了使用elementuiadmin去掉默认mock权限控制的设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
![Vuex报错之[vuex] unknown mutation type: handlePower问题及解决](http://img.jbzj.com/images/xgimg/bcimg1.png)
最新评论