Vant

繁體中文

简体中文
English

繁體中文

简体中文
English

Appearance

ActionSheet 動作面板 - Vant 4

ActionSheet 動作面板 ​

📋 介紹 ​

動作面板是一個優雅的交互組件！它從底部彈起，為用戶提供與當前情境相關的多個選項。無論是分享、編輯、刪除，還是其他操作，動作面板都能讓用戶快速做出選擇，提供流暢的操作體驗。

📦 引入 ​

通過以下方式來全局註冊組件，更多註冊方式請參考組件註冊。

js
import { createApp } from'vue'; 
import { ActionSheet } from'vant'; 
const app = createApp(); 
app.use(ActionSheet);

🎯 代碼演示 ​

基礎用法 ​

動作面板通過 actions 屬性來定義選項，actions 屬性是一個由對象構成的數組，數組中的每個對象配置一列，對象格式見文檔下方表格。簡單配置，即可擁有功能完整的動作面板！

js
import { ref } from'vue'; 
import { showToast } from'vant'; 
export default { 
    setup() { 
        const show = ref(false); 
        const actions = [ { name: '選項一' }, { name: '選項二' }, { name: '選項三' }, ]; 
        const onSelect = (item) => { 
            // 默認情況下點擊選項時不會自動收起
            // 可以通過 close-on-click-action 屬性開啟自動收起 
            show.value = false; 
            showToast(item.name); 
        }; 
        return { show, actions, onSelect, };
    }, 
};

展示圖標 ​

使用 actions 的 icon 字段可以為選項設置圖標，讓選項更加直觀易懂！

js
import { ref } from'vue'; 
import { showToast } from'vant'; 
export default {
    setup() { 
        const show = ref(false); 
        const actions = [ { name: '選項一', icon: 'cart-o' }, { name: '選項二', icon: 'shop-o' }, { name: '選項三', icon: 'star-o' }, ]; const onSelect = (item) => { 
            show.value = false; 
            showToast(item.name); 
        }; 
            return { show, actions, onSelect }; 
    };
}

展示取消按鈕 ​

設置 cancel-text 屬性後，會在底部展示取消按鈕，點擊後關閉當前面板並觸發 cancel 事件。

js
import { ref } from'vue'; 
import { showToast } from'vant'; 
export default { 
    setup() { 
        const show = ref(false); 
        const actions = [ { name: '選項一' }, { name: '選項二' }, { name: '選項三' }, ]; 
        const onCancel = () => showToast('取消'); 
        return { show, actions, onCancel}; 
    }
};

展示描述信息 ​

通過 description 可以在菜單頂部顯示描述信息，通過選項的 subname 屬性可以在選項文字的右側展示描述信息。

js
import { ref } from'vue'; 
export default { 
    setup() { 
        const show = ref(false); 
        const actions = [ { name: '選項一' }, { name: '選項二' }, { name: '選項三', subname: '描述信息' }, ]; 
        const onSelect = (item) => { 
            show.value = false; 
            showToast(item.name); 
        }; 
        return { show, actions, onSelect, }; 
    }
};

選項狀態 ​

可以通過 loading 和 disabled 將選項設置為加載狀態或禁用狀態，或者通過color設置選項的顏色

js
import { ref } from'vue'; 
export default { 
    setup() { 
        const show = ref(false); 
        const actions = [ { name: '著色選項', color: '#ee0a24' }, { name: '禁用選項', disabled: true }, { name: '加載選項', loading: true }, ]; 
        const onSelect = (item) => { 
            show.value = false; 
            showToast(item.name); 
        }; 
        return { show, actions, onSelect, }; 
    }
};

自定義面板 ​

通過插槽可以自定義面板的展示內容，同時可以使用title屬性展示標題欄

API ​

Props ​

參數說明類型默認值
v-model:show是否顯示動作面板booleanfalse
actions面板選項列表ActionSheetAction[][]
title頂部標題string-
cancel-text取消按鈕文字string-
description選項上方的描述信息string-
closeable是否顯示關閉圖標booleantrue
close-icon關閉圖標名稱或圖片鏈接，等同於 Icon 組件的 name 屬性stringcross
duration動畫時長，單位秒，設置為 0 可以禁用動畫*numberstring*
z-index將面板的 z-index 層級設置為一個固定值*numberstring*
round是否顯示圓角booleantrue
overlay是否顯示遮罩層booleantrue
overlay-class自定義遮罩層類名*stringArray
overlay-style自定義遮罩層樣式object-
lock-scroll是否鎖定背景滾動booleantrue
lazy-render是否在顯示彈層時才渲染節點booleantrue
close-on-popstate是否在頁面回退時自動關閉booleantrue
close-on-click-action是否在點擊選項後關閉booleanfalse
close-on-click-overlay是否在點擊遮罩層後關閉booleantrue
safe-area-inset-bottom是否開啟底部安全區適配booleantrue
teleport指定掛載的節點，等同於 Teleport 組件的 to 屬性*stringElement*
before-close關閉前的回調函數，返回 false 可阻止關閉，支持返回 Promise*(action: string) => booleanPromise<boolean>*

Action 數據結構 ​

actions 屬性是一個由對象構成的數組，數組中的每個對象配置一列，對象可以包含以下值：

鍵名說明類型
name標題string
subname二級標題string
color選項文字顏色string
icon v4.8.6選項圖標名稱或圖片鏈接string
className為對應列添加額外的 class*string
loading是否為加載狀態boolean
disabled是否為禁用狀態boolean
callback點擊時觸發的回調函數action: ActionSheetAction

Events ​

事件名說明回調參數
select點擊選項時觸發，禁用或加載狀態下不會觸發action: ActionSheetAction, index: number
cancel點擊取消按鈕時觸發-
open打開面板時觸發-
close關閉面板時觸發-
opened打開面板且動畫結束後觸發-
closed關閉面板且動畫結束後觸發-
click-overlay點擊遮罩層時觸發event: MouseEvent

Slots ​

名稱說明參數
default自定義面板的展示內容-
description自定義描述文案-
cancel自定義取消按鈕內容-
action自定義選項內容{ action: ActionSheetAction, index: number }

類型定義 ​

組件導出以下類型定義：

ts
import type { ActionSheetProps, ActionSheetAction } from 'vant';

主題定制 ​

樣式變量 ​

組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 ConfigProvider 組件。

名稱默認值描述
--van-action-sheet-max-height80%-
--van-action-sheet-header-height48px-
--van-action-sheet-header-font-sizevar(--van-font-size-lg)-
--van-action-sheet-description-colorvar(--van-text-color-2)-
--van-action-sheet-description-font-sizevar(--van-font-size-md)-
--van-action-sheet-description-line-heightvar(--van-line-height-md)-
--van-action-sheet-item-backgroundvar(--van-background-2)-
--van-action-sheet-item-font-sizevar(--van-font-size-lg)-
--van-action-sheet-item-line-heightvar(--van-line-height-lg)-
--van-action-sheet-item-text-colorvar(--van-text-color)-
--van-action-sheet-item-disabled-text-colorvar(--van-text-color-3)-
--van-action-sheet-item-icon-size18px-
--van-action-sheet-item-icon-margin-rightvar(--van-padding-xs)-
--van-action-sheet-subname-colorvar(--van-text-color-2)-
--van-action-sheet-subname-font-sizevar(--van-font-size-sm)-
--van-action-sheet-subname-line-heightvar(--van-line-height-sm)-
--van-action-sheet-close-icon-size22px-
--van-action-sheet-close-icon-colorvar(--van-gray-5)-
--van-action-sheet-close-icon-padding0 var(--van-padding-md)-
--van-action-sheet-cancel-text-colorvar(--van-gray-7)-
--van-action-sheet-cancel-padding-topvar(--van-padding-xs)-
--van-action-sheet-cancel-padding-colorvar(--van-background)-
--van-action-sheet-loading-icon-size22px-

🎉 總結 ​

ActionSheet 動作面板是移動端交互的明星組件！它優雅地從底部彈起，為用戶提供清晰的選擇界面。無論是簡單的選項列表，還是帶圖標、描述的複雜面板，ActionSheet 都能輕鬆勝任，讓你的應用交互更加流暢自然。

📚 相關內容 ​

想要了解更多？這些內容可能對你有幫助：

基於Vant構建的企業級移動端解決方案

Copyright © 2025 siex.cn ｜ sitemap