feat: 新增 button 组件 suffix-icon 与 prefix-icon 属性

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

@@ -95,10 +95,10 @@ export default {
 ::: demo 使用 `fluid` 属性, 创建最大化按钮
 
 <template>
-  <lay-button type="primary" fluid>最大化按钮</lay-button>
+  <lay-button type="primary" fluid="true">最大化按钮</lay-button>
   <br/>
   <br/>
-  <lay-button type="default" fluid>最大化按钮</lay-button>
+  <lay-button type="default" fluid="true">最大化按钮</lay-button>
 </template>
 
 <script>
@@ -186,6 +186,7 @@ export default {
   <lay-button-container>
       <lay-button type="primary"><lay-icon type="layui-icon-left"></lay-icon></lay-button>
       <lay-button type="primary"><lay-icon type="layui-icon-right"></lay-icon></lay-button>
+      <lay-button prefix-icon="layui-icon-left" suffix-icon="layui-icon-right"></lay-button>
   </lay-button-container>
 </template>
 
@@ -309,6 +310,8 @@ export default {
 | disabled    | 禁用     | boolean | `false`   | `true` `false`                     |
 | loading     | 加载     | boolean | `false`   | `true` `false`                     |
 | native-type | 原生类型 | string  | `button`  | `button` `submit` `reset`          |
+| prefix-icon | 前置图标 | string  | --   | 内置 icon 集                     |
+| suffix-icon | 后置图标 | string  | --   | 内置 icon 集          |
 
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -16,6 +16,8 @@
       <li> 
         <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
         <ul>
+          <li>[新增] button 组件 prefix-icon 属性。
+          <li>[新增] button 组件 suffix-icon 属性。</li>
           <li>[新增] table 组件 row 和 row-double 时间的 event 参数。</li>
           <li>[新增] table 组件 contextmenu 行右键事件。</li>
           <li>[支持] Cdn 直接导入。</li>

example/src/view/index.vue

@@ -28,7 +28,7 @@
               >{{ t('home.changelog') }}</router-link
             ></span
           >
-          <span>{{ t('home.download') }}：<em class="site-showdowns">4680</em></span>
+          <span>{{ t('home.download') }}：<em class="site-showdowns">5463</em></span>
         </div>
       </div>
       <div class="site-banner-other">

src/component/button/index.vue

@@ -7,17 +7,25 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { computed } from "vue";
+import {
+  ButtonBorder,
+  ButtonNativeType,
+  ButtonSize,
+  ButtonType,
+} from "./interface";
+import { BooleanOrString, String } from "src/types";
 
 export interface LayButtonProps {
-  type?: "primary" | "normal" | "warm" | "danger";
-  size?: "lg" | "sm" | "xs";
-  fluid?: boolean | string;
-  radius?: boolean | string;
-  border?: "green" | "blue" | "orange" | "red" | "black";
-  disabled?: boolean | string;
-  loading?: boolean | string;
-  nativeType?: "button" | "submit" | "reset";
-  icon?: string;
+  type?: ButtonType;
+  size?: ButtonSize;
+  prefixIcon?: String;
+  suffixIcon?: String;
+  border?: ButtonBorder;
+  fluid?: BooleanOrString;
+  radius?: BooleanOrString;
+  loading?: BooleanOrString;
+  disabled?: BooleanOrString;
+  nativeType?: ButtonNativeType;
 }
 
 const props = withDefaults(defineProps<LayButtonProps>(), {
@@ -26,7 +34,6 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
   loading: false,
   disabled: false,
   nativeType: "button",
-  icon: "",
 });
 
 const emit = defineEmits(["click"]);
@@ -39,6 +46,11 @@ const onClick = (event: any) => {
 
 const classes = computed(() => {
   return [
+    {
+      "layui-btn-fluid": props.fluid,
+      "layui-btn-radius": props.radius,
+      "layui-btn-disabled": props.disabled,
+    },
     props.type ? `layui-btn-${props.type}` : "",
     props.size ? `layui-btn-${props.size}` : "",
     props.border ? `layui-border-${props.border}` : "",
@@ -49,22 +61,22 @@ const classes = computed(() => {
 <template>
   <button
     class="layui-btn"
-    :class="[
-      {
-        'layui-btn-fluid': fluid,
-        'layui-btn-radius': radius,
-        'layui-btn-disabled': disabled,
-      },
-      classes,
-    ]"
+    :class="classes"
     :type="nativeType"
     @click="onClick"
   >
-    <i v-if="icon" :class="'layui-icon ' + icon"></i>
+    <i v-if="prefixIcon" :class="`layui-icon ${prefixIcon}`"></i>
     <i
       v-if="loading"
-      class="layui-icon layui-icon-loading-one layui-anim layui-anim-rotate layui-anim-loop"
+      class="
+        layui-icon
+        layui-icon-loading-one
+        layui-anim
+        layui-anim-rotate
+        layui-anim-loop
+      "
     ></i>
     <slot v-else></slot>
+    <i v-if="suffixIcon" :class="`layui-icon ${suffixIcon}`"></i>
   </button>
 </template>

src/component/button/interface.ts

@@ -0,0 +1,4 @@
+export type ButtonType = "primary" | "normal" | "warm" | "danger";
+export type ButtonSize = "lg" | "sm" | "xs";
+export type ButtonBorder = "green" | "blue" | "orange" | "red" | "black";
+export type ButtonNativeType = "button" | "submit" | "reset";

src/component/buttonGroup/index.less

@@ -19,11 +19,6 @@
   border-left: none;
 }
 
-.layui-btn-group .layui-btn:hover {
-  border-color: #d2d2d2;
-  color: @button-primary-color;
-}
-
 .layui-btn-group .layui-btn:first-child {
   border-left: none;
   border-radius: @button-border-radius 0 0 @button-border-radius;

src/types/public.ts

@@ -17,3 +17,15 @@ export type Nullable<T> = T | null;
 export type MaybeRef<T> = Ref<T> | T;
 
 export type Recordable = Record<string, any>;
+
+/************************/
+
+export type Number = number;
+
+export type String = string;
+
+export type Boolean = boolean;
+
+export type NumberOrString = number | string;
+
+export type BooleanOrString = boolean | string;