使用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ù)值，例如：
this.$toast({
message:'我是需要提示的文字',
position:'200px' // 彈框的位置可以自己設置
});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)文章
websocket+Vuex實現(xiàn)一個實時聊天軟件
這篇文章主要利用websocked 建立長連接，利用Vuex全局通信的特性，以及watch,computed函數(shù)監(jiān)聽消息變化，并驅(qū)動頁面變化實現(xiàn)實時聊天，感興趣的可以了解一下2021-08-08
Vue結(jié)合Element-Plus封裝遞歸組件實現(xiàn)目錄示例
本文主要介紹了Vue結(jié)合Element-Plus封裝遞歸組件實現(xiàn)目錄示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本文介紹了如何開發(fā)自定義全局公共組件的兩種方法,第一種方法是通過在components文件夾中創(chuàng)建新的組件文件夾,例如Loading文件夾,并在其中創(chuàng)建index.js和index.vue文件,通過在vue的入口文件main.js中進行引入,可以實現(xiàn)組件的全局調(diào)用2024-10-10
vue如何使用async、await實現(xiàn)同步請求
這篇文章主要介紹了vue如何使用async、await實現(xiàn)同步請求,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了從0搭建Vue3組件庫之如何使用Vite打包組件庫,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
wepy--用vantUI 實現(xiàn)上彈列表并選擇相應的值操作
這篇文章主要介紹了wepy--用vantUI 實現(xiàn)上彈列表并選擇相應的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue 同步異步存值取值實現(xiàn)案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個JavaScript的校驗插件,通常用來校驗語法或代碼的書寫風格,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
Vue2.x中利用@font-size引入字體圖標報錯的解決方法
今天小編就為大家分享一篇Vue2.x中利用@font-size引入字體圖標報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇解決vue數(shù)組中對象屬性變化頁面不渲染問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08