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