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）是我們日常開發(fā)中經常使用的組件，它可用作與用戶交互的反饋提示，信息提交成功、錯誤、操作警告等場景使用。
原生JavaScript 提供了 alert、prompt、confirm 等方法
提示框1=>Message.error
import { Message } from “element-ui”;Message.error('該金額區(qū)間不存在，請檢查后重新輸入')
提示框2=>success
Message({
type: 'success',
message: '刪除成功!',
})
提示框3=>error
Message({
type: 'error',
message: '你不是上傳用戶，無法進行文件修改！',
})
提示框4=>warning
Message({
type: 'warning',
message: '暫不支持該類型文件預覽!目前支持圖片與word、pdf、excel、圖片、txt等文件預覽！',
})
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue中$refs, $emit, $on, $once, $off的使用詳解
這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
手勢鎖是常見的一種手機解鎖方式，本文主要介紹了vue封裝一個圖案手勢鎖組件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了Vue標尺插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
vue-cli自定義創(chuàng)建項目eslint依賴沖突解決方式
vue-cli是vue.js的腳手架,用于自動生成vue.js+webpack的項目模板,在創(chuàng)建項目時,如果遇到npm安裝報錯,通常是由于依賴版本沖突造成的,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了關于VUE3函數的聲明和使用的相關資料, Vue3是一種流行的JavaScript框架,它允許開發(fā)人員構建現代化的Web應用程序,需要的朋友可以參考下2023-07-07
Vue+Element+Springboot圖片上傳的實現示例
最近在學習前段后分離，本文介紹了Vue+Element+Springboot圖片上傳的實現示例，具有一定的參考價值，感興趣的可以了解一下2021-11-11
這篇文章主要為大家介紹了vue中v-if和v-show使用區(qū)別源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本篇文章主要介紹了vue2.0的contextmenu右鍵彈出菜單的實例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本篇文章主要介紹了詳解使用webpack打包編寫一個vue插件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11