ActionSheet 操作菜单

本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。

平台差异说明

基本使用

• 通过list设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供text属性，另外可选的有fontSize(字体大小)，color(颜色)
• 通过v-model绑定一个值为布尔值的变量控制组件的弹出与收起，v-model的值是双向绑定的

<template>
    <u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                    text: '点赞',
                    color: 'blue',
                    fontSize: 28
                }, {
                    text: '分享'
                }, {
                    text: '评论'
                }],
                show: true
            }
        }
    }
</script>

配置顶部的提示信息和底部取消按钮

• tips参数为一个对象类型，属性可以设置text，fontSize(字体大小)，color(颜色)，文本内容将会显示组件的上方，起提示作用。
• cancel-btn参数配置是否显示底部的取消按钮，默认显示

<template>
    <u-action-sheet :list="list" v-model="show" :tips="tips" :cancel-btn="true"></u-action-sheet>
</template>
<script>
    export default {
        data() {
            return {
                tips: {
                    text: '在水一方',
                    color: '#909399',
                    fontSize: 24
                },
                list: [{
                    text: '点赞',
                    color: 'blue',
                    fontSize: 28
                }],
                show: true
            }
        }
    }
</script>

如何知道点了第几项

click回调事件带有一个index值，这个索引值为传递的list数组的索引值，根据回调事件，能获得点击了 第几项和该项的内容

<template>
    <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                    text: '点赞',
                    color: 'blue',
                    fontSize: 28
                }, {
                    text: '分享'
                }, {
                    text: '评论'
                }],
                show: true
            }
        },
        methods: {
            click(index) {
                console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
            }
        }
    }
</script>

API

Props

注意：props中没有控制组件弹出与收起的参数，因为这是通过v-model绑定变量实现的，见上方说明。

Event