[新增] progress 进度条组件

This commit is contained in:
就眠仪式
2021-09-27 09:24:54 +08:00
parent 1cee98414e
commit d7e6036cbc
6 changed files with 61 additions and 5 deletions

View File

@@ -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>

View File

@@ -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

View File

@@ -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>

View File

@@ -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>