LamboActionSheet 动作面板

介绍

LamboActionSheet 是一个基于vant拓展的动作面板展示组件，在van-action-sheet组件基础上集成了lambo-button-group组件，动作面板底部的按钮组更符合用户使用习惯。

引入

import Vue from 'vue';
import LamboActionSheet from '@lambo-design-mobile/lambo-action-sheet';
 
Vue.use(LamboActionSheet);

代码演示

基础用法

<van-button @click="actionShow">点击这里</van-button>
<action-sheet :showAction="showAction" :actions-value-list="actionsValueList" :title="title"></action-sheet>

import {Button} from '@lambo-design-mobile/core'
export default {
    components:{
        vanButton:Button
    },
    name: "index",
    data(){
        return{
            showAction:false,
            actionsValueList:[{name:'选项一'},{name:'选项二'},{name:'选项三'}],
            title:'请选择'
        }
    },
    methods:{
        actionShow(){
            this.showAction = true
        }
    }
}

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | title | 弹出框顶部的标题 | String | '' | - | | showAction | 是否展示动作面板 | boolean | false | - | | buttonNameList | 动作面板底部的按钮名称组 | Array | [] | - | | buttonColorList | 动作面板底部的按钮风格组 | Array | ['info', 'primary', 'primary'] | - | | actionsValueList | 动作面板展示的列表数据 | Array | [] | - | | closeOnClickOverlay | 是否在点击遮罩层时关闭动作面板 | boolean | true | - | | isOpenFunction | 是否开启打开遮罩层的监听，开启之后通过openOverlayFunction回调 | boolean | false | - | | isOpened | 是否开启打开遮罩层且动画结束的监听，开启之后通过opened回调 | boolean | false | - | | isFixed | 动作面板底部的按钮是否沉底fixed | boolean | true | - |

actionsValueList 数据结构

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | name | 标题 | String | '' | - | | subname | 二级标题 | String | '' | - | | color | 选项文字的颜色 | String | '' | - | | className | 为对应列添加的className | String | '' | - | | loading | 是否为加载状态 | boolean | false | - | | disabled | 是否为禁用状态 | boolean | false | - |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | btn-click | 按钮点击参数 | index(从左到右被点击的按钮的位置：0～2) | | select-action | 点击选项时触发，禁用或加载状态下不会触发 | action: Action, index: number | | openOverlayFunction | 打开面板时触发 | - | | opened | 打开面板且动画结束后触发 | - |