vue2组件系列第十二节:Actionsheet 上拉菜单

Actionsheet上拉菜单是从底部伸展开来的一个菜单。这个菜单不具有滚动的效果，所以与picker还是有些区别，适合数量较少的菜单选项。有两种情况，一种是带选项的菜单模式，可以自定义选项；另一种是具有其它内容的模式，这种模式里的内容可以自定义。

准备工作：

1. 创建一个页面: Actionsheet.vue
2. 在router.js里配置 Toast页面的路由

{
 path: '/actionsheet',
 name: 'actionsheet',
 component: () => import('./views/Actionsheet.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/actionsheet')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>上拉菜单</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了7个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Actionsheet上拉菜单：

菜单模式:

<van-button type="primary" @click="onClick">点击弹出</van-button>
<van-actionsheet
 v-model="isShow"
 :actions="actions"
 @select="onSelect"
/>

actions：自定义的菜单选项。其值是数组，数组是由菜单对象组成。里面包括以下属性：

name：菜单名称

subname：对菜单名的一个注释，位置在菜单名的右侧

loading：是否为加载状态

disabled：是否为禁用状态

有两个事件，一个是select事件，一个是cancel事件

我们在data里设置菜单数据：

data() {
 return {
 isShow: false,
 actions: [
 {
 name: '选择水果'
 },
 {
 name: '苹果',
 subname: '描述信息'
 },
 {
 name: '香蕉',
 subname: '描述信息'
 },
 {
 name: '桔子',
 subname: '描述信息'
 },
 }
},

methods里设置如下：

onSelect(item) {
 this.isShow = false;
 this.$toast(item.name);
},
onClick() {
 this.isShow = !this.isShow
},

我们可以给它加一下“取消”按钮，“取消”按钮只有在菜单模式下有用，自定义模式下有自己的取消按钮：

<van-actionsheet
 v-model="isShow"
 cancel-text="取消"
 :actions="actions"
 @select="onSelect"
 />

需要说明一点的是select事件，会有一个item参数，这个item就是我们选择那一项的对象。

自定义内容模式：

<van-actionsheet v-model="isShow" title="活动规则">
 <div style="padding: 20px;text-align: left">这里是活动规则内空体噢</div>
</van-actionsheet>

title只有在自定义模式下有用。菜单模式下使用title属性，会使菜单选项不显示。

lazy-render懒加载是一个很有用的属性。

select事件当然在这个模式下是没有用的。

到目前为止呢，Actionsheet上拉菜单就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油