使用Vant如何完成各種Toast提示框
更新時(shí)間：2022年05月26日 14:11:10 作者：檸檬不萌只是酸i
這篇文章主要介紹了使用Vant如何完成各種Toast提示框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vant完成各種Toast提示框
效果展示
（1）使用前的需要安裝Vant奧。
（2）在main.js里面引入Toast
import { Toast } from 'vant';
Vue.use(Toast);（3）在頁(yè)面使用：（根據(jù)步驟代碼可以運(yùn)行奧 Toast.vue文件）（上面截圖的，在下面代碼都有栗子奧）。
<template> ? <!-- Toast提示 --> ? <div id="toast"> ? ? <van-button plain type="primary" @click="toToast">普通文字提示</van-button> ? ? <van-button plain type="primary" @click="toLoading">加載轉(zhuǎn)圈提示</van-button> ? ? <van-button plain type="primary" @click="toSuccessTip">成功提示</van-button> ? ? <van-button plain type="primary" @click="toFailTip">失敗提示</van-button> ? ? <van-button plain type="primary" @click="toCustomIcon">自定義圖標(biāo)提示</van-button> ? ? <van-button plain type="primary" @click="toCustomImage">自定義圖片提示</van-button> ? </div> </template>
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? msg: ''
? ? ? }
? ? },
? ? // 引入 Toast 組件后，會(huì)自動(dòng)在 Vue 的 prototype 上掛載 $toast 方法，便于在組件內(nèi)調(diào)用。
? ? methods: {
? ? ? // 普通文字提示
? ? ? toToast() {
? ? ? ? this.$toast({
? ? ? ? ? message:'我是需要提示的文字',
? ? ? ? ? position:'top'
? ? ? ? });
? ? ? },
?
? ? ? // 加載轉(zhuǎn)圈提示
? ? ? toLoading() {
? ? ? ? this.$toast.loading({
? ? ? ? ? mask: true,
? ? ? ? ? message: '加載中...'
? ? ? ? });
? ? ? },
?
? ? ? // 成功提示
? ? ? toSuccessTip() {
? ? ? ? this.$toast.success({
? ? ? ? ? message:'成功的提示文案',
? ? ? ? })
? ? ? },
?
? ? ? // 失敗提示
? ? ? toFailTip() {
? ? ? ? this.$toast.fail({
? ? ? ? ? message:'失敗的提示文案'
? ? ? ? })
? ? ? },
?
? ? ? // ? 自定義圖標(biāo)
? ? ? toCustomIcon() {
? ? ? ? this.$toast({
? ? ? ? ? icon: 'star-o', // 找到自己需要的圖標(biāo)
? ? ? ? ? message: '我是提示文字'
? ? ? ? })
? ? ? },
?
? ? ? //自定義圖片提示
? ? ? toCustomImage() {
? ? ? ? this.$toast({
? ? ? ? ? icon:'https://www.baidu.com/favicon.ico',
? ? ? ? ? message:'我是提示文字'
? ? ? ? })
? ? ? }
?
? ? },
? ? mounted() {
?
? ? }
? }
</script>
<style> </style>
（4）Toast的相關(guān)API和Options 點(diǎn)擊去查看
更新補(bǔ)充
position 里面的高度不局限與 top bottom等，也可設(shè)置數(shù)值，例如：
this.$toast({
message:'我是需要提示的文字',
position:'200px' // 彈框的位置可以自己設(shè)置
});Vant Toast用法
題外話就不多講了，這是圍繞vue.js寫(xiě)的，愛(ài)上vue.js
1.首先引入
import { Toast } from 'vant'寫(xiě)個(gè)小列子
綁定一個(gè)click事件
2.寫(xiě)事件
在methods寫(xiě)方法
showToast() {
this.$toast({
message: "今日簽到+3",
})
},3.效果圖如下
一個(gè)簡(jiǎn)單的toast提示成就好了
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue中組件傳參的幾種常用方法,Vue組件傳參方也是面試最?？嫉膬?nèi)容,文中通過(guò)代碼實(shí)例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
在本篇文章中，我們給大家詳細(xì)講述了vue中如何配置less的詳細(xì)代碼和步驟，有需要的朋友跟著學(xué)習(xí)下。2018-09-09
Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組
這篇文章主要為大家詳細(xì)介紹了vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Vue聲明式導(dǎo)航與編程式導(dǎo)航示例分析講解
這篇文章主要介紹了Vue中聲明式導(dǎo)航與編程式導(dǎo)航，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11
這篇文章主要為大家介紹了Vue?編譯器optimize源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07