引入

import Vue from 'vue';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);

代碼演示

基礎(chǔ)用法

ActionSheet通過(guò)actions數(shù)組來(lái)定義展示的選項(xiàng)，數(shù)組的每一項(xiàng)是一個(gè)對(duì)象，對(duì)象屬性見文檔下方表格。

<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />

import { Toast } from 'vant';

export default {
  data() {
    return {
      show: false,
      actions: [
        { name: '選項(xiàng)' },
        { name: '選項(xiàng)' },
        { name: '選項(xiàng)', subname: '描述信息' }
      ]
    };
  },
  methods: {
    onSelect(item) {
      // 默認(rèn)情況下點(diǎn)擊選項(xiàng)時(shí)不會(huì)自動(dòng)收起
      // 可以通過(guò) close-on-click-action 屬性開啟自動(dòng)收起
      this.show = false;
      Toast(item.name);
    }
  }
}

展示取消按鈕

設(shè)置cancel-text屬性后，會(huì)在底部展示取消按鈕，點(diǎn)擊后關(guān)閉當(dāng)前菜單

<van-action-sheet
  v-model="show"
  :actions="actions"
  cancel-text="取消"
  @cancel="onCancel"
/>

import { Toast } from 'vant';

export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    onCancel() {
      this.show = false;
      Toast('cancel');
    }
  }
}

展示描述信息

設(shè)置description屬性后，會(huì)在選項(xiàng)上方顯示描述信息

<van-action-sheet
  v-model="show"
  :actions="actions"
  description="這是一段描述信息"
/>

選項(xiàng)狀態(tài)

可以將選項(xiàng)設(shè)置為加載狀態(tài)或禁用狀態(tài)，或者通過(guò)color設(shè)置選項(xiàng)顏色

<van-action-sheet
  v-model="show"
  :actions="actions"
  cancel-text="取消"
  @cancel="onCancel"
/>

export default {
  data() {
    return {
      show: false,
      actions: [
        { name: '選項(xiàng)', color: '#07c160' },
        { loading: true },
        { name: '禁用選項(xiàng)', disabled: true }
      ]
    };
  }
}

自定義面板

通過(guò)插槽可以自定義菜單的展示內(nèi)容，同時(shí)可以使用title屬性展示標(biāo)題欄

<van-action-sheet v-model="show" title="標(biāo)題">
  <div class="content">內(nèi)容</div>
</van-action-sheet>

<style>
.content {
  padding: 16px 16px 160px;
}
</style>

API

Props

Action 數(shù)據(jù)結(jié)構(gòu)

actions屬性為一個(gè)對(duì)象數(shù)組，數(shù)組中的每個(gè)對(duì)象配置一列，對(duì)象可以包含以下值：

Events

常見問(wèn)題

引入時(shí)提示 dependencies not found？

在 1.x 版本中，上拉菜單的組件名為Actionsheet，從 2.0 版本開始更名為ActionSheet，請(qǐng)注意區(qū)分。