LamboButtonGroup 按钮组

介绍

LamboButtonGroup是一个按钮组展示组件,主要适用于表单最后的操作按钮的展示、弹出框底部响应按钮的展示等需要按钮交互的场景。

引入

import Vue from 'vue';
import LamboButtonGroup from '@lambo-design-mobile/lambo-button-group';
 
Vue.use(LamboButtonGroup);

代码演示

基础用法

<lambo-button-group :buttonNameList="buttonNameList" :buttonColorList="buttonColorList" @btn-click="btnClick"></lambo-button-group>

import { Toast } from '@lambo-design-mobile/core'
export default {
    name: "index",
    data() {
        return {
            buttonNameList: ['取消','确定','删除'],
            buttonColorList:['primary','info','danger'],
        }
    },
    methods:{
        btnClick(i){
            Toast({
                message:'从左至右第'+(i+1)+'个按钮被点击了'
            })
        }
    }
}

fixed沉底用法

<button-group :buttonNameList="buttonNameList" :buttonColorList="buttonColorList" @btn-click="btnClick" isFixed></button-group>

import { Toast } from '@lambo-design-mobile/core'
export default {
    name: "index",
    data() {
        return {
            buttonNameList: ['沉底按钮'],
            buttonColorList:['primary'],
        }
    },
    methods:{
        btnClick(i){
            Toast({
                message:'沉底按钮被点击了'
            })
        }
    }
}

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | isFixed | 是否固定在底部 | boolean | false | - | | buttonNameList | 按钮名称组 | Array | ['提交', '取消', '取消'] | - | | buttonColorList | 按钮风格组 | Array | ['info', 'primary', 'primary'] | - | | permissionList | 权限列表 | Array | [] | - | | showBoxShadow | 是否展示box-shadow，一般与isFixed:true同时设置。(bax-shadow:0 -4px 4px 0 rgba(0,0,0,.09)) | boolean | false | - |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | btn-click | 按钮点击参数 | index(从左到右被点击的按钮的位置：0～2) |