feat: 新增 button 组件 border-style 属性

package/component/src/component/button/index.vue

@@ -13,7 +13,7 @@ import {
   ButtonSize,
   ButtonType,
 } from "./interface";
-import { Boolean, BooleanOrString, String } from "../../types";
+import { BooleanOrString, String } from "../../types";
 
 export interface LayButtonProps {
   type?: ButtonType;
@@ -26,6 +26,7 @@ export interface LayButtonProps {
   loading?: BooleanOrString;
   disabled?: BooleanOrString;
   nativeType?: ButtonNativeType;
+  borderStyle?: String;
 }
 
 const props = withDefaults(defineProps<LayButtonProps>(), {
@@ -34,6 +35,7 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
   loading: false,
   disabled: false,
   nativeType: "button",
+  borderStyle: "soild"
 });
 
 const emit = defineEmits(["click"]);
@@ -44,6 +46,12 @@ const onClick = (event: any) => {
   }
 };
 
+const styles = computed(() => {
+  return { 
+    border: `1px ${props.borderStyle}`
+  }
+})
+
 const classes = computed(() => {
   return [
     {
@@ -62,6 +70,7 @@ const classes = computed(() => {
   <button
     class="layui-btn"
     :class="classes"
+    :style="styles"
     :type="nativeType"
     @click="onClick"
   >
@@ -73,4 +82,4 @@ const classes = computed(() => {
     <slot v-else></slot>
     <i v-if="suffixIcon" :class="`layui-icon ${suffixIcon}`"></i>
   </button>
-</template>
+</template>

package/document/src/document/zh-CN/components/button.md

@@ -61,6 +61,33 @@ export default {
 
 :::
 
+::: title 次要按钮
+:::
+
+::: demo 使用 `border-style` 属性设置边框样式
+
+<template>
+  <lay-button border-style="dashed">原始按钮</lay-button>
+  <lay-button border="green" border-style="dashed">默认按钮</lay-button>
+  <lay-button border="blue" border-style="dashed">百搭按钮</lay-button>
+  <lay-button border="orange" border-style="dashed">暖色按钮</lay-button>
+  <lay-button border="red" border-style="dashed">警告按钮</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 按钮尺寸
 :::
 
@@ -300,6 +327,7 @@ export default {
 | fluid       | 最大化   | boolean | `false`   | `true` `false`                     |
 | radius      | 圆角     | boolean | `false`   | `true` `false`                     |
 | border      | 边框     | string  | `green`   | `green` `blue` `orange` `red`      |
+| border-style      | 边框样式    | string  | `soild`   | `soild` `dashed` `dotted`     |
 | disabled    | 禁用     | boolean | `false`   | `true` `false`                     |
 | loading     | 加载     | boolean | `false`   | `true` `false`                     |
 | native-type | 原生类型 | string  | `button`  | `button` `submit` `reset`          |

package/document/src/document/zh-CN/guide/changelog.md

@@ -16,6 +16,7 @@
       <li> 
         <h3>1.0.2 <span class="layui-badge-rim">2022-04-07</span></h3> 
         <ul>
+          <li>[新增] button 组件 border-style 属性, 允许自定义边框样式。(by @就眠儀式)</li>
           <li>[新增] config-provider 组件 dark-partial 属性, 夜间主题偏好配置。(by @就眠儀式)</li>
           <li>[修复] page 组件 pages 属性为单数时, 页码计算错误。(by @就眠儀式)</li>
           <li>[修复] panel 组件 background-color 为透明的问题。(by @就眠儀式)</li>