[新增] progress 进度条组件

docs/src/components/LayCode.vue

@@ -22,7 +22,7 @@
       class="control"
       @click="toggleShow"
     >
-      <i :class="[show ? 'el-icon-caret-top' : 'el-icon-caret-bottom']" />
+      <i :class="[show ? 'layui-icon layui-icon-up' : 'layui-icon layui-icon-down']" />
     </div>
   </div>
 </template>
@@ -124,6 +124,7 @@ function handleScroll() {
 .lay-code .control {
   height: 44px;
   box-sizing: border-box;
+  margin-top: 10px;
   border-top: 1px solid whitesmoke;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;

src/index.ts

@@ -13,6 +13,7 @@ import LayHeader from "./module/header/index"
 import LayFooter from "./module/footer/index"
 import LayLogo from "./module/logo/index"
 import LayPanel from "./module/panel/index"
+import LayProgress from "./module/panel/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -25,7 +26,8 @@ const components: Record<string, IDefineComponent> = {
   LayFooter,
   LayLogo,
   LayPanel,
-  LayCard
+  LayCard,
+  LayProgress
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -50,6 +52,7 @@ export {
   LayLogo,
   LayPanel, 
   LayCard,
+  LayProgress,
   install,
 }
 

src/module/col/index.vue

@@ -1,9 +1,16 @@
 <template>
-  <div class="layui-col">
+  <div class="layui-col" :class="[md?'layui-col-md' + md : '', xs?'layui-col-xs':'', sm?'layui-col-sm':'']">
       <slot></slot>
   </div>
 </template>
 
 <script setup name="LayCol" lang="ts">
+import { defineProps } from '@vue/runtime-core'
 
-</script>
+const props =
+  defineProps<{
+    md?: string
+    xs?: string
+    sm?: string
+  }>()
+</script>

src/module/progress/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 || 'LayProgress', Component)
+}
+
+export default Component as IDefineComponent

src/module/progress/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="layui-progress" :class="'layui-progress-' + size">
+    <div
+      class="layui-progress-bar"
+      :class="'layui-bg-' + this.theme"
+      :style="[
+        this.color ? 'background-color: ' + this.color : '',
+        {
+          width: this.percentage + '%',
+        },
+      ]"
+    >
+      <span v-if="showText" class="layui-progress-text">
+        {{ text ? text : this.percentage + '%' }}
+      </span>
+    </div>
+  </div>
+</template>
+<script setup name="LayProgress" lang="ts">
+import { defineProps } from '@vue/runtime-core'
+
+const props =
+  defineProps<{
+    percentage: Number
+    theme: String
+    color: String
+    size: String
+    showText: Boolean
+    text: String
+  }>()
+</script>

src/module/row/index.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="layui-row">
+  <div class="layui-row" :class="[space?'layui-col-space'+space:'']">
       <slot></slot>
   </div>
 </template>
 
 <script setup name="LayRow" lang="ts">
+import { defineProps } from '@vue/runtime-core'
 
+const props =
+  defineProps<{
+    space?: string
+  }>()
 </script>