W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
在頁面頂部展示消息提示,支持組件調(diào)用和函數(shù)調(diào)用兩種方式。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { Notify } from 'vant';
const app = createApp();
app.use(Notify);
為了便于使用 ?Notify
?,Vant 提供了一系列輔助函數(shù),通過輔助函數(shù)可以快速喚起全局的消息提示。
比如使用 ?showNotify
?函數(shù),調(diào)用后會直接在頁面中渲染對應(yīng)的提示。
import { showNotify } from 'vant';
showNotify({ message: '提示' });
import { showNotify, closeNotify } from 'vant';
// 3 秒后自動關(guān)閉
showNotify('通知內(nèi)容');
// 主動關(guān)閉
closeNotify();
支持 ?primary
?、?success
?、?warning
?、?danger
? 四種通知類型,默認為 ?danger
?。
import { showNotify } from 'vant';
// 主要通知
showNotify({ type: 'primary', message: '通知內(nèi)容' });
// 成功通知
showNotify({ type: 'success', message: '通知內(nèi)容' });
// 危險通知
showNotify({ type: 'danger', message: '通知內(nèi)容' });
// 警告通知
showNotify({ type: 'warning', message: '通知內(nèi)容' });
自定義消息通知的顏色、位置和展示時長。
import { showNotify } from 'vant';
showNotify({
message: '自定義顏色',
color: '#ad0000',
background: '#ffe1e1',
});
showNotify({
message: '自定義位置',
position: 'bottom',
});
showNotify({
message: '自定義時長',
duration: 1000,
});
如果需要在 Notify 內(nèi)嵌入組件或其他自定義內(nèi)容,可以直接使用 Notify 組件,并使用默認插槽進行定制。使用前需要通過 ?app.use
? 等方式注冊組件。
<van-button type="primary" text="組件調(diào)用" @click="showNotify" />
<van-notify v-model:show="show" type="success">
<van-icon name="bell" style="margin-right: 4px;" />
<span>通知內(nèi)容</span>
</van-notify>
import { ref } from 'vue';
export default {
setup() {
const show = ref(false);
const showNotify = () => {
show.value = true;
setTimeout(() => {
show.value = false;
}, 2000);
};
return {
show,
showNotify,
};
},
};
Vant 中導(dǎo)出了以下 Notify 相關(guān)的輔助函數(shù):
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
showNotify | 展示提示 | NotifyOptions | string
|
notify 實例 |
closeNotify | 關(guān)閉提示 | - | void
|
setNotifyDefaultOptions | 修改默認配置,影響所有的 showNotify 調(diào)用 |
NotifyOptions
|
void
|
resetNotifyDefaultOptions | 重置默認配置,影響所有的 showNotify 調(diào)用 |
- | void
|
調(diào)用 ?showNotify
? 等方法時,支持傳入以下選項:
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
type | 類型,可選值為 primary success warning
|
NotifyType | danger
|
message | 展示文案,支持通過\n 換行 |
string | - |
duration | 展示時長(ms),值為 0 時,notify 不會消失 | number | string | 3000
|
z-index | 將組件的 z-index 層級設(shè)置為一個固定值 | number | string | 2000+
|
position v3.4.0
|
彈出位置,可選值為 bottom
|
NotifyPosition | top
|
color | 字體顏色 | string | white
|
background | 背景顏色 | string | - |
className | 自定義類名 | string | Array | object | - |
lockScroll v3.0.7
|
是否鎖定背景滾動 | boolean | false
|
onClick | 點擊時的回調(diào)函數(shù) | (event: MouseEvent): void | - |
onOpened | 完全展示后的回調(diào)函數(shù) | () => void | - |
onClose | 關(guān)閉時的回調(diào)函數(shù) | () => void | - |
組件導(dǎo)出以下類型定義:
import type {
NotifyType,
NotifyProps,
NotifyOptions,
NotifyPosition,
} from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認值 | 描述 |
---|---|---|
--van-notify-text-color | var(--van-white) | - |
--van-notify-padding | var(--van-padding-xs) var(--van-padding-md) | - |
--van-notify-font-size | var(--van-font-size-md) | - |
--van-notify-line-height | var(--van-line-height-md) | - |
--van-notify-primary-background | var(--van-primary-color) | - |
--van-notify-success-background | var(--van-success-color) | - |
--van-notify-danger-background | var(--van-danger-color) | - |
--van-notify-warning-background | var(--van-warning-color) | - |
如果引用 ?showNotify
? 方法時出現(xiàn)以下報錯,說明項目中使用了 ?babel-plugin-import
? 插件,導(dǎo)致代碼被錯誤編譯。
These dependencies were not found:
* vant/es/show-notify in ./src/xxx.js
* vant/es/show-notify/style in ./src/xxx.js
Vant 從 4.0 版本開始不再支持 ?babel-plugin-import
? 插件,請參考 遷移指南 移除該插件。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: