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