[新增] progress 进度条

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

@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-input></lay-input>
+  <lay-input v-model="data"></lay-input>{{data}}
 </template>
 
 <script>
@@ -10,7 +10,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const data = ref("内容");
+
     return {
+      data
     }
   }
 }

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

@@ -1,12 +1,19 @@
 ::: demo
 
 <template>
+  默认分割线
   <lay-line></lay-line>
+  赤色分割线
   <lay-line theme="red"></lay-line>
+  橙色分割线
   <lay-line theme="orange"></lay-line>
+  墨绿分割线
   <lay-line theme="green"></lay-line>
+  青色分割线
   <lay-line theme="cyan"></lay-line>
+  蓝色分割线
   <lay-line theme="blue"></lay-line>
+  黑色分割线
   <lay-line theme="black"></lay-line>
 </template>
 

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

@@ -0,0 +1,21 @@
+::: demo
+
+<template>
+  <lay-progress percent="80"></lay-progress>
+  <br>
+  <lay-progress percent="60"></lay-progress>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -16,6 +16,7 @@
           <li><router-link to="/zh-CN/components/badge">徽章</router-link></li>
           <li><router-link to="/zh-CN/components/block">区块</router-link></li>
           <li><router-link to="/zh-CN/components/line">分割</router-link></li>
+          <li><router-link to="/zh-CN/components/progress">进度</router-link></li>
         </ul>
       </lay-side>
       <lay-body>

docs/src/router/zh-CN.ts

@@ -64,6 +64,11 @@ const zhCN = [
         path: '/zh-CN/components/line',
         component: () => import('../../docs/zh-CN/components/line.md'),
         meta: { title: '分割' },
+      },
+      {
+        path: '/zh-CN/components/progress',
+        component: () => import('../../docs/zh-CN/components/progress.md'),
+        meta: { title: '进度' },
       }
     ],
   },

src/index.ts

@@ -16,7 +16,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"
+import LayProgress from "./module/progress/index"
 import LayCol from "./module/col/index"
 import LayRow from "./module/row/index"
 import LayInput from "./module/input/index"

src/module/input/index.vue

@@ -1,12 +1,21 @@
 <template>
-    <input type="text" class="layui-input" />
+  <input :type="type" :value="modelValue" :name="name" class="layui-input" @input="updateValue"/>
 </template>
 
 <script setup name="LayInput" lang="ts">
-import { defineProps } from '@vue/runtime-core'
+import { defineProps, defineEmits } from '@vue/runtime-core'
 
 const props =
   defineProps<{
+    name?: string
     type?: string
+    modelValue?: string
   }>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const updateValue = function(event: unknown,value: unknown) {
+  emit('update:modelValue', value)
+}
+
 </script>

src/module/progress/index.vue

@@ -6,12 +6,12 @@
       :style="[
         this.color ? 'background-color: ' + this.color : '',
         {
-          width: this.percentage + '%',
+          width: this.percent + '%',
         },
       ]"
     >
       <span v-if="showText" class="layui-progress-text">
-        {{ text ? text : this.percentage + '%' }}
+        {{ text ? text : this.percent + '%' }}
       </span>
     </div>
   </div>
@@ -21,7 +21,7 @@ import { defineProps } from '@vue/runtime-core'
 
 const props =
   defineProps<{
-    percentage: Number
+    percent: Number
     theme: String
     color: String
     size: String