[新增] button-group 按钮组

docs/docs/zh-CN/components/button.md

@@ -47,3 +47,83 @@ export default {
 </script>
 
 :::
+
+
+::: demo 传入 columns 数据，自动生成表格
+
+<template>
+  <lay-button type="primary" fluid>最大化按钮</lay-button>
+  <br/>
+  <br/>
+  <lay-button type="default" fluid>最大化按钮</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo 传入 columns 数据，自动生成表格
+
+<template>
+  <lay-button type="primary" radius>原始按钮</lay-button>
+  <lay-button type="default" radius>默认按钮</lay-button>
+  <lay-button type="normal" radius>百搭按钮</lay-button>
+  <lay-button type="warm" radius>暖色按钮</lay-button>
+  <lay-button type="danger" radius>警告按钮</lay-button>
+  <lay-button type="disabled" radius>禁用按钮</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo 传入 columns 数据，自动生成表格
+
+<template>
+  <div>
+    <lay-button-group>
+      <lay-button type="default" radius>默认按钮</lay-button>
+      <lay-button type="default" radius>默认按钮</lay-button>
+      <lay-button type="default" radius>默认按钮</lay-button>
+    </lay-button-group>
+    <lay-button-group>
+      <lay-button type="primary" radius>默认按钮</lay-button>
+      <lay-button type="primary" radius>默认按钮</lay-button>
+      <lay-button type="primary" radius>默认按钮</lay-button>
+    </lay-button-group>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

src/index.ts

@@ -4,6 +4,7 @@ import type { IDefineComponent, InstallOptions } from './module/type/index'
 import "./css/layui.css";
 import LayRadio from './module/radio/index'
 import LayButton from './module/button/index'
+import LayButtonGroup from './module/buttonGroup/index'
 import LayIcon from './module/icon/index'
 import LayCard from './module/card/index'
 import LayLayout from "./module/layout/index"
@@ -27,7 +28,8 @@ const components: Record<string, IDefineComponent> = {
   LayLogo,
   LayPanel,
   LayCard,
-  LayProgress
+  LayProgress,
+  LayButtonGroup
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -53,6 +55,7 @@ export {
   LayPanel, 
   LayCard,
   LayProgress,
+  LayButtonGroup,
   install,
 }
 

src/module/button/index.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     class="layui-btn"
-    :class="[type ? 'layui-btn-' + type : '', size ? 'layui-btn-' + size : '']"
+    :class="[type ? 'layui-btn-' + type : '', size ? 'layui-btn-' + size : '',fluid ? 'layui-btn-fluid':'',radius ? 'layui-btn-radius':'']"
   >
     <slot></slot>
   </button>
@@ -14,5 +14,7 @@ const props =
   defineProps<{
     type?: string
     size?: string
+    fluid?: boolean
+    radius?: boolean
   }>()
 </script>

src/module/buttonGroup/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+  app.component(Component.name || 'LayButtonGroup', Component)
+}
+
+export default Component as IDefineComponent

src/module/buttonGroup/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="layui-btn-group">
+      <slot></slot>
+  </div>
+</template>
+
+<script setup name="LayButtonGroup" lang="ts">
+
+</script>