Vant ActionSheet 上拉菜單

引入

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

Vue.use(ActionSheet);

代碼演示

基礎(chǔ)用法

ActionSheet通過actions數(shù)組來定義展示的選項，數(shù)組的每一項是一個對象，對象屬性見文檔下方表格。

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

import { Toast } from 'vant';

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

展示取消按鈕

設(shè)置cancel-text屬性后，會在底部展示取消按鈕，點擊后關(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屬性后，會在選項上方顯示描述信息

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

選項狀態(tài)

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

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

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

自定義面板

通過插槽可以自定義菜單的展示內(nèi)容，同時可以使用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屬性為一個對象數(shù)組，數(shù)組中的每個對象配置一列，對象可以包含以下值：

Events

常見問題

引入時提示 dependencies not found？

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