Vant ActionSheet 动作面板功能介绍

发布时间：2023-04-20 12:33:41 所属栏目：教程来源：

导读：Vant ActionSheet 动作面板主要是实现手机端的上拉菜单效果。

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

Vue.use(ActionSheet);
基础用法
ActionSheet通过actio

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>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!