快捷導(dǎo)航

vue實(shí)現(xiàn)顯示消息提示框功能

更新時(shí)間：2024年04月27日 15:20:21 作者：換日線°

這篇文章主要介紹了vue實(shí)現(xiàn)顯示消息提示框功能,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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)粘ｉ_發(fā)中經(jīng)常使用的組件，它可用作與用戶交互的反饋提示，信息提交成功、錯(cuò)誤、操作警告等場景使用。

原生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: '你不是上傳用戶，無法進(jìn)行文件修改！',
        })

提示框4=>warning

Message({
          type: 'warning',
          message: '暫不支持該類型文件預(yù)覽!目前支持圖片與word、pdf、excel、圖片、txt等文件預(yù)覽！',
        })

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在組件中修改vuex中state的具體實(shí)現(xiàn)方法
在組件中修改 Vuex 中的 state,根據(jù)使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但總體思路都是借助 Vuex 提供的 mutations 或 actions 來實(shí)現(xiàn),以下分別介紹兩種版本下的具體實(shí)現(xiàn)方法,需要的朋友可以參考下
2025-02-02
Vuex報(bào)錯(cuò)之[vuex] unknown mutation type: han
這篇文章主要介紹了Vuex報(bào)錯(cuò)之[vuex] unknown mutation type: handlePower問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
詳解vue-admin和后端(flask)分離結(jié)合的例子
本篇文章主要介紹了詳解vue-admin和后端(flask)分離結(jié)合的例子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02
如何在Vue3和Vite項(xiàng)目中用SQLite數(shù)據(jù)庫進(jìn)行數(shù)據(jù)存儲
SQLite是一種嵌入式關(guān)系型數(shù)據(jù)庫管理系統(tǒng),是一個(gè)零配置、無服務(wù)器的、自給自足的、事務(wù)性的SQL數(shù)據(jù)庫引擎,這篇文章主要給大家介紹了關(guān)于如何在Vue3和Vite項(xiàng)目中用SQLite數(shù)據(jù)庫進(jìn)行數(shù)據(jù)存儲的相關(guān)資料,需要的朋友可以參考下
2024-03-03
vue實(shí)現(xiàn)驗(yàn)證碼按鈕倒計(jì)時(shí)功能
最近項(xiàng)目結(jié)束，空閑時(shí)間比較多，今天小編抽時(shí)間給大家使用vue寫一個(gè)小例子，就決定做驗(yàn)證碼倒計(jì)時(shí)功能，具體實(shí)例代碼大家參考下本文
2018-04-04
詳解Vue 匿名、具名和作用域插槽的使用方法
這篇文章主要介紹了Vue 匿名、具名和作用域插槽的使用方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長方體效果
這篇文章主要介紹了vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長方體效果,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue elementUI實(shí)現(xiàn)拖拽流程圖效果
這篇文章主要為大家詳細(xì)介紹了如何通過vue elementUI實(shí)現(xiàn)拖拽流程圖效果,不引入插件,純手寫實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-01-01
使用elementuiadmin去掉默認(rèn)mock權(quán)限控制的設(shè)置
這篇文章主要介紹了使用elementuiadmin去掉默認(rèn)mock權(quán)限控制的設(shè)置方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
基于Vue2.X的路由和鉤子函數(shù)詳解
下面小編就為大家分享一篇基于Vue2.X的路由和鉤子函數(shù)詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02