Vant ActionSheet 动作面板
Vant ActionSheet 动作面板主要是实现手机端的上拉。
import Vue from 'vue'; import { ActionSheet } from 'vant'; Vue.use(ActionSheet);
ActionSheet通过actions数组来定义展示的选项,数组的每一项是对象,对象见文档下方表格。
<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) { // 认情况下点击选项时不会收起 // 可以通过 close-on-click-action 开启收起 this.show = false; Toast(item.name); } } }
设置cancel-text后,会在展示取消按钮,点击后当前
<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'); } } }
设置description后,会在选项上方描述信息
<van-action-sheet v-model="show" :actions="actions" description="这是一段描述信息" />
可以将选项设置为加载状态或禁用状态,或者通过color设置选项颜色
<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 } ] }; } }
通过插槽可以的展示,同时可以使用title展示栏
<van-action-sheet v-model="show" title=""> <div class="content"></div> </van-action-sheet> <style> .content { padding: 16px 16px 160px; } </style>
API
actions为对象数组,数组中的每个对象配置一列,对象可以包含以下值:
常见问题
在 1.x 版本中,上拉的组件名为Actionsheet,从 2.0 版本开始更名为ActionSheet,请注意区分。