import Vue from 'vue';
import {ActionSheet} from 'vue-ydui/dist/lib.rem/actionsheet';
/* 使用px：import {ActionSheet} from 'vue-ydui/dist/lib.px/actionsheet'; */
Vue.component(ActionSheet.name, ActionSheet);<template>
<div>
<yd-button @click.native="show1 = true" size="large">带取消</yd-button>
<yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"></yd-actionsheet>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
show1: false,
myItems1: [
{
label: '拍照',
method: () => {
this.$dialog.toast({mes: '咔擦，此人太帅！'});
/* 注意： method: function() {} 和 method() {} 这样是无法正常使用当前this的 */
}
},
{
label: '从相册中偷取',
method: () => {
this.$dialog.toast({mes: '看到了不该看到的东西！'});
}
}
]
}
}
}
</script>将yd-actionsheet组件的 v-model 绑定到一个本地变量show1，通过操作这个变量即可控制 actionsheet 的显示与隐藏。
<template>
<div>
<yd-button @click.native="show2 = true" size="large" type="warning">不带取消</yd-button>
<yd-actionsheet :items="myItems2" v-model="show2"></yd-actionsheet>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
show2: false,
myItems2: [
{
label: '示例菜单一 - 我是不会关闭的',
method: () => {
this.$dialog.toast({mes: 'Say: 我是不会关闭的！'});
},
stay: true /* 不关闭 */
},
{
label: '示例菜单二 - 自动关闭',
method: () => {
this.$dialog.toast({mes: 'Say: 我关闭啦啦啦！'});
}
},
{label: '示例菜单三 - 自动关闭'},
{label: '示例菜单四 - 自动关闭'}
]
}
}
}
</script>将items属性绑定一个由对象组成的数组myItems2，每个对象有label，method 和 stay 三个键；
label 菜单项的文本；
method 点击该菜单项的回调函数；
stay 是否关闭 actionsheet，默认false，直接关闭。