底部彈起的模態(tài)面板,包含與當前情境相關的多個選項。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { ActionSheet } from 'vant';
const app = createApp();
app.use(ActionSheet);
動作面板通過 actions 屬性來定義選項,actions 屬性是一個由對象構成的數(shù)組,數(shù)組中的每個對象配置一列,對象格式見文檔下方表格。
<van-cell is-link title="基礎用法" @click="show = true" />
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
setup() {
const show = ref(false);
const actions = [
{ name: '選項一' },
{ name: '選項二' },
{ name: '選項三' },
];
const onSelect = (item) => {
// 默認情況下點擊選項時不會自動收起
// 可以通過 close-on-click-action 屬性開啟自動收起
show.value = false;
Toast(item.name);
};
return {
show,
actions,
onSelect,
};
},
};
設置 cancel-text 屬性后,會在底部展示取消按鈕,點擊后關閉當前面板并觸發(fā) cancel 事件。
<van-action-sheet
v-model:show="show"
:actions="actions"
cancel-text="取消"
close-on-click-action
@cancel="onCancel"
/>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
setup() {
const show = ref(false);
const actions = [
{ name: '選項一' },
{ name: '選項二' },
{ name: '選項三' },
];
const onCancel = () => Toast('取消');
return {
show,
actions,
onCancel,
};
},
};
通過 description 可以在菜單頂部顯示描述信息,通過選項的 subname 屬性可以在選項文字的右側展示描述信息。
<van-action-sheet
v-model:show="show"
:actions="actions"
cancel-text="取消"
description="這是一段描述信息"
close-on-click-action
/>
import { ref } from 'vue';
export default {
setup() {
const show = ref(false);
const actions = [
{ name: '選項一' },
{ name: '選項二' },
{ name: '選項三', subname: '描述信息' },
];
return {
show,
actions,
};
},
};
可以通過 loading 和 disabled 將選項設置為加載狀態(tài)或禁用狀態(tài),或者通過color設置選項的顏色
<van-action-sheet
v-model:show="show"
:actions="actions"
cancel-text="取消"
close-on-click-action
/>
import { ref } from 'vue';
export default {
setup() {
const show = ref(false);
const actions = [
{ name: '著色選項', color: '#ee0a24' },
{ name: '禁用選項', disabled: true },
{ name: '加載選項', loading: true },
];
return {
show,
actions,
};
},
};
通過插槽可以自定義面板的展示內(nèi)容,同時可以使用title屬性展示標題欄
<van-action-sheet v-model:show="show" title="標題">
<div class="content">內(nèi)容</div>
</van-action-sheet>
<style>
.content {
padding: 16px 16px 160px;
}
</style>
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
v-model:show | 是否顯示動作面板 | boolean | false
|
actions | 面板選項列表 | Action[] | []
|
title | 頂部標題 | string | - |
cancel-text | 取消按鈕文字 | string | - |
description | 選項上方的描述信息 | string | - |
closeable | 是否顯示關閉圖標 | boolean | true
|
close-icon | 關閉圖標名稱或圖片鏈接 | string | cross
|
duration | 動畫時長,單位秒,設置為 0 可以禁用動畫 | number | string | 0.3
|
round | 是否顯示圓角 | boolean | true
|
overlay | 是否顯示遮罩層 | boolean | true
|
overlay-class | 自定義遮罩層類名 | string | Array | object | - |
overlay-style | 自定義遮罩層樣式 | object | - |
lock-scroll | 是否鎖定背景滾動 | boolean | true
|
lazy-render | 是否在顯示彈層時才渲染節(jié)點 | boolean | true
|
close-on-popstate | 是否在頁面回退時自動關閉 | boolean | false
|
close-on-click-action | 是否在點擊選項后關閉 | boolean | false
|
close-on-click-overlay | 是否在點擊遮罩層后關閉 | boolean | true
|
safe-area-inset-bottom | 是否開啟底部安全區(qū)適配 | boolean | true
|
teleport | 指定掛載的節(jié)點,等同于 Teleport 組件的 to 屬性 | string | Element | - |
before-close v3.1.4
|
關閉前的回調(diào)函數(shù),返回 false 可阻止關閉,支持返回 Promise |
(action: string) => boolean | Promise<boolean> | - |
actions 屬性是一個由對象構成的數(shù)組,數(shù)組中的每個對象配置一列,對象可以包含以下值:
鍵名 | 說明 | 類型 |
---|---|---|
name | 標題 | string |
subname | 二級標題 | string |
color | 選項文字顏色 | string |
className | 為對應列添加額外的 class | string | Array | object |
loading | 是否為加載狀態(tài) | boolean |
disabled | 是否為禁用狀態(tài) | boolean |
callback | 點擊時觸發(fā)的回調(diào)函數(shù) | action: Action |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
select | 點擊選項時觸發(fā),禁用或加載狀態(tài)下不會觸發(fā) | action: Action, index: number |
cancel | 點擊取消按鈕時觸發(fā) | - |
open | 打開面板時觸發(fā) | - |
close | 關閉面板時觸發(fā) | - |
opened | 打開面板且動畫結束后觸發(fā) | - |
closed | 關閉面板且動畫結束后觸發(fā) | - |
click-overlay | 點擊遮罩層時觸發(fā) | event: MouseEvent |
名稱 | 說明 |
---|---|
default | 自定義面板的展示內(nèi)容 |
description | 自定義描述文案 |
cancel v3.0.10
|
自定義取消按鈕內(nèi)容 |
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認值 | 描述 |
---|---|---|
--van-action-sheet-max-height | 80% | - |
--van-action-sheet-header-height | 48px | - |
--van-action-sheet-header-font-size | var(--van-font-size-lg) | - |
--van-action-sheet-description-color | var(--van-gray-6) | - |
--van-action-sheet-description-font-size | var(--van-font-size-md) | - |
--van-action-sheet-description-line-height | var(--van-line-height-md) | - |
--van-action-sheet-item-background | var(--van-white) | - |
--van-action-sheet-item-font-size | var(--van-font-size-lg) | - |
--van-action-sheet-item-line-height | var(--van-line-height-lg) | - |
--van-action-sheet-item-text-color | var(--van-text-color) | - |
--van-action-sheet-item-disabled-text-color | var(--van-gray-5) | - |
--van-action-sheet-subname-color | var(--van-gray-6) | - |
--van-action-sheet-subname-font-size | var(--van-font-size-sm) | - |
--van-action-sheet-subname-line-height | var(--van-line-height-sm) | - |
--van-action-sheet-close-icon-size | 22px | - |
--van-action-sheet-close-icon-color | var(--van-gray-5) | - |
--van-action-sheet-close-icon-active-color | var(--van-gray-6) | - |
--van-action-sheet-close-icon-padding | 0 var(--van-padding-md) | - |
--van-action-sheet-cancel-text-color | var(--van-gray-7) | - |
--van-action-sheet-cancel-padding-top | var(--van-padding-xs) | - |
--van-action-sheet-cancel-padding-color | var(--van-background-color) | - |
--van-action-sheet-loading-icon-size | 22px | - |
更多建議: