vant ActionSheet动作面板之一级面板和二级面板
main.js导入组件
import { ActionSheet } from 'vant';
Vue.use(ActionSheet);
组件内
<template>
<div>
<button @click="show1=true">点我有惊喜</button>
<!-- 一级反馈面板 -->
<!-- get-container="body" 一定要有 -->
<van-action-sheet
v-model="show1"
:actions="actions1"
cancel-text="取消"
@select="onSelect"
get-container="body"
/>
<!-- 二级反馈面板 -->
<van-action-sheet
v-model="show2"
:actions="actions2"
cancel-text="返回"
@select="onSelect"
get-container="body"
/>
</div>
</template>
<script>
export default {
data () {
return {
show1: false,
show2: false,
actions1: [{ id: 11, name: '不感兴趣1' }, { id: 22, name: '反馈垃圾内容1' }, { id: 33, name: '拉黑作者1' }],
actions2: [{ id: 1, name: '我是谁2' }, { id: 2, name: '我在哪2' }, { id: 3, name: '我****2' }]
}
},
methods: {
onSelect (action, index) {
console.log(action, index)
if (action.id === 22) { // 点击反馈垃圾内容1时才出现二级反馈面板
this.show2 = true
}
}
}
}
</script>
<style>
</style>