目錄
#基本使用
#配置toast主題
#toast結(jié)束跳轉(zhuǎn)URL
#API
#Props
#Params
#Methods
此組件表現(xiàn)形式類似uni的uni.showToastAPI，但也有不同的地方，具體表現(xiàn)在：
- uView的
toast有5種主題可選 - 可以配置toast結(jié)束后，跳轉(zhuǎn)相應(yīng)URL
- 目前沒有加載中的狀態(tài)，請用uni的
uni.showLoading，這個需求uni已經(jīng)做得很好
注意：
由于uni中無法通過js創(chuàng)建元素，所以需要在頁面中調(diào)用<toast />組件，再通過ref開啟
#基本使用
以下為一個模擬登錄成功后，彈出toast提示，并在一定時間(默認(rèn)2000ms)后，自動跳轉(zhuǎn)頁面到個人中心頁(也可以配置跳轉(zhuǎn)的參數(shù))的示例
<template>
<view>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
methods: {
showToast() {
this.$refs.uToast.show({
title: '登錄成功',
type: 'success',
url: '/pages/user/index'
})
}
}
}
</script>
#配置toast主題
一共有6種主題可選，如下：
- default-灰黑色，最普通的場景，此為默認(rèn)主題，可以不用填
type參數(shù) - error-紅色，代表錯誤
- success-綠色，代表成功
- warning-黃色，代表警告
- info-灰色，比default淺一點
- primary-藍(lán)色，uView的主色調(diào)
除了default狀態(tài)，其他5種主題，都是默認(rèn)帶有一個左邊的圖標(biāo)，可以通過配置icon參數(shù)為none來取消
this.$refs.uToast.show({
title: '操作成功',
// 如果不傳此type參數(shù)，默認(rèn)為default，也可以手動寫上 type: 'default'
// type: 'success',
// 如果不需要圖標(biāo)，請設(shè)置為false
// icon: false
})
#toast結(jié)束跳轉(zhuǎn)URL
- 如果配置了
url參數(shù)，在toast結(jié)束的時候，就會用uni.navigateTo(默認(rèn))或者uni.switchTab(需另外設(shè)置isTab為true) - 如果配置了
params參數(shù)，就會在跳轉(zhuǎn)時自動在URL后面拼接上這些參數(shù)，具體用法如下：
this.$refs.uToast.show({
title: '操作成功',
url: '/pages/user/index',
params: {
id: 1,
menu: 3
}
})
#API
#Props
| 參數(shù) | 說明 | 類型 | 默認(rèn)值 | 可選值 |
|---|---|---|---|---|
| z-index | toast展示時的z-index值 |
String | Number | 10090 | - |
#Params
這些參數(shù)為通過ref調(diào)用<toast/>組件內(nèi)部的show方法時，需要傳遞參數(shù)文章來源：http://www.zghlxwxcb.cn/news/detail-808095.html
| 參數(shù) | 說明 | 類型 | 默認(rèn)值 | 可選值 |
|---|---|---|---|---|
| title | 顯示的文本 | String | - | - |
| type | 主題類型，不填默認(rèn)為default
|
String | default | primary / success / error / warning / info |
| duration | toast的持續(xù)時間，單位ms | Nubmer | 2000 | - |
| url | toast結(jié)束跳轉(zhuǎn)的url，不填不跳轉(zhuǎn)，優(yōu)先級高于back參數(shù) |
String | - | - |
| icon | 是否顯示顯示type對應(yīng)的圖標(biāo)，為false不顯示圖標(biāo) |
Boolean | true | false |
| position | toast出現(xiàn)的位置 | String | center | top / bottom |
| callback?1.3.6 | toast結(jié)束后執(zhí)行的回調(diào)方法 | Function | - | - |
| isTab | toast結(jié)束后，跳轉(zhuǎn)tab頁面時需要配置為true
|
Boolean | false | true |
| back?1.4.0 | toast結(jié)束后，是否返回上一頁，優(yōu)先級低于url參數(shù) |
Boolean | false | true |
#Methods
方法是通過ref調(diào)用的，參見上方說明 注意：所有有關(guān)ref的調(diào)用，都不能在頁面的onLoad生命周期調(diào)用，因為此時組件尚未創(chuàng)建完畢，會報錯，應(yīng)該在onReady生命周期調(diào)用。文章來源地址http://www.zghlxwxcb.cn/news/detail-808095.html
| 方法名 | 說明 | 參數(shù) | 版本 |
|---|---|---|---|
| show | 顯示toast，如需一進(jìn)入頁面就顯示toast，請在onReady生命周期調(diào)用 |
見上方說明 | - |
到了這里，關(guān)于uniapp中uview組件庫Toast 消息提示 的使用方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
