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-03vue-cli自定義創(chuàng)建項目eslint依賴沖突解決方式
vue-cli是vue.js的腳手架,用于自動生成vue.js+webpack的項目模板,在創(chuàng)建項目時,如果遇到npm安裝報錯,通常是由于依賴版本沖突造成的,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09Vue+Element+Springboot圖片上傳的實現示例
最近在學習前段后分離,本文介紹了Vue+Element+Springboot圖片上傳的實現示例,具有一定的參考價值,感興趣的可以了解一下2021-11-11