[新增] progress 进度条组件
This commit is contained in:
@@ -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>
|
||||
9
src/module/progress/index.ts
Normal file
9
src/module/progress/index.ts
Normal 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
|
||||
31
src/module/progress/index.vue
Normal file
31
src/module/progress/index.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user