我要评论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等文件预览！',
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论