[新增] icon 组件

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

@@ -25,8 +25,36 @@ export default {
 
 :::
 
+##### 尺寸
+
+::: demo 传入 columns 数据，自动生成表格
+
+<template>
+  <lay-button type="primary" size="lg">原始按钮</lay-button>
+  <lay-button type="default" size="lg">默认按钮</lay-button>
+  <lay-button type="normal" size="lg">百搭按钮</lay-button>
+  <lay-button type="warm" size="lg">暖色按钮</lay-button>
+  <lay-button type="danger" size="lg">警告按钮</lay-button>
+  <lay-button type="disabled" size="lg">禁用按钮</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 #### 插槽
 
-| name          | 说明                                                                     |
-| :------------ | :----------------------------------------------------------------------- |
-| type          | 按钮类型                                               |
+| name          | 说明                                        |           |
+| :------------ | :-------------------------------------------|----------|
+| type          | 按钮类型                                     | `primary` `normal` `warm` `danger` |
+| size          | 按钮尺寸                                     | `lg` `sm` `xs`|

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

@@ -0,0 +1,28 @@
+##### 基础
+
+::: demo 传入 columns 数据，自动生成表格
+
+<template>
+  <lay-icon type="layui-icon-face-smile"></lay-icon>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+#### 插槽
+
+| name          | 说明                                        |           |
+| :------------ | :-------------------------------------------|----------|
+| type          | 按钮类型                                     | `primary` `normal` `warm` `danger` |
+| size          | 按钮尺寸                                     | `lg` `sm` `xs`|

docs/src/layouts/Layout.vue

@@ -6,6 +6,7 @@
     <lay-side>
       <router-link to="/zh-CN/components/layout">布局</router-link>
       <router-link to="/zh-CN/components/button">按钮</router-link>
+      <router-link to="/zh-CN/components/icon">图标</router-link>
     </lay-side>
     <lay-body>
       <div style="padding: 20px">

docs/src/router/zh-CN.ts

@@ -11,7 +11,7 @@ const zhCN = [
         path: '/zh-CN/guide/',
         component: () => import('../../docs/zh-CN/guide/home.md'),
         meta: { title: '介绍' },
-      }
+      },
     ],
   },
   {
@@ -24,6 +24,10 @@ const zhCN = [
         path: '/zh-CN/components/button',
         component: () => import('../../docs/zh-CN/components/button.md'),
         meta: { title: '按钮' },
+      },{
+        path: '/zh-CN/components/icon',
+        component: () => import('../../docs/zh-CN/components/icon.md'),
+        meta: { title: '图标' },
       }
     ],
   },

src/module/button/index.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
 import Component from './index.vue'
-import type { IDefineComponent } from '../../type/index'
+import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
   app.component(Component.name || 'LayButton ', Component)

src/module/button/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <button class="layui-btn" :class="[type ? 'layui-btn-' + type : '']">
+    <button class="layui-btn" :class="[type ? 'layui-btn-' + type : '',size ? 'layui-btn-' + size : '']">
         <slot></slot>
     </button>
 </template>
@@ -8,7 +8,8 @@
 import { defineProps } from "@vue/runtime-core";
 
 const props = defineProps<{
-  type?: string
+  type?: string,
+  size?: string
 }>()
 
 </script>

src/module/icon/index.vue

@@ -1,7 +1,10 @@
 <template>
-    <button class="layui-btn">按钮</button>
+    <i class="layui-icon" :class="[type]"></i>
 </template>
 
 <script setup name="LayButton" lang="ts">
-
+const props =
+  defineProps<{
+    type?: string
+  }>()
 </script>