vant actionsheet 使用
时间: 2023-07-08 07:30:05 浏览: 170
datasheet的使用
好的,vant actionsheet 使用起来非常简单,以下是一个基本的使用示例:
1. 首先,在你的项目中安装 vant:
```bash
npm install vant -S
```
2. 然后,在你的页面中引入 vant actionsheet 组件:
```javascript
import { ActionSheet } from 'vant';
```
3. 接着,在需要使用 actionsheet 的地方调用 show 方法来展示它:
```javascript
ActionSheet.show({
title: '选择操作',
actions: [
{ name: '选项一', icon: 'icon1' },
{ name: '选项二', icon: 'icon2' },
{ name: '选项三', icon: 'icon3' },
],
cancelText: '取消',
onSelect: (index) => {
console.log(`你选择了第 ${index} 个选项`);
},
onCancel: () => {
console.log('你点击了取消按钮');
},
});
```
其中,title 是 actionsheet 的标题,actions 是一个包含选项的数组,cancelText 是取消按钮的文本,onSelect 是选项被选中时的回调函数,onCancel 是取消按钮被点击时的回调函数。
除此之外,vant actionsheet 还支持很多其他的配置项,比如自定义样式、关闭图标等等。你可以查看 vant 官网上的文档来了解更多信息。
阅读全文