test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(components): [progress] use useNamespace (#5729)

Browse Source
This commit is contained in:
bqy 2022-02-08 11:38:42 +08:00 committed by GitHub
parent 258622fdac
commit c54f446197
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/components/progress/src/progress.vue
View File

@ -1,12 +1,12 @@
<template>
<div
class="el-progress"
:class="[
`el-progress--${type}`,
status ? `is-${status}` : '',
ns.b(),
ns.m(type),
ns.is(status),
{
'el-progress--without-text': !showText,
'el-progress--text-inside': textInside,
[ns.m('without-text')]: !showText,
[ns.m('text-inside')]: textInside,
},
]"
role="progressbar"
@ -14,21 +14,21 @@
aria-valuemin="0"
aria-valuemax="100"
>
<div v-if="type === 'line'" class="el-progress-bar">
<div v-if="type === 'line'" :class="ns.b('bar')">
<div
class="el-progress-bar__outer"
:class="ns.be('bar', 'outer')"
:style="{ height: `${strokeWidth}px` }"
>
<div
:class="[
'el-progress-bar__inner',
{ 'el-progress-bar__inner--indeterminate': indeterminate },
ns.be('bar', 'inner'),
{ [ns.bem('bar', 'inner', 'indeterminate')]: indeterminate },
]"
:style="barStyle"
>
<div
v-if="(showText || $slots.default) && textInside"
class="el-progress-bar__innerText"
:class="ns.be('bar', 'innerText')"
>
<slot v-bind="slotData">
<span>{{ content }}</span>
@ -39,12 +39,12 @@
</div>
<div
v-else
class="el-progress-circle"
:class="ns.b('circle')"
:style="{ height: `${width}px`, width: `${width}px` }"
>
<svg viewBox="0 0 100 100">
<path
class="el-progress-circle__track"
:class="ns.be('circle', 'track')"
:d="trackPath"
stroke="#e5e9f2"
:stroke-width="relativeStrokeWidth"
@ -52,7 +52,7 @@
:style="trailPathStyle"
/>
<path
class="el-progress-circle__path"
:class="ns.be('circle', 'path')"
:d="trackPath"
:stroke="stroke"
fill="none"
@ -64,7 +64,7 @@
</div>
<div
v-if="(showText || $slots.default) && !textInside"
class="el-progress__text"
:class="ns.e('text')"
:style="{ fontSize: `${progressTextSize}px` }"
>
<slot v-bind="slotData">
@ -85,6 +85,7 @@ import {
Check,
Close,
} from '@element-plus/icons-vue'
import { useNamespace } from '@element-plus/hooks'
import { progressProps } from './progress'
import type { CSSProperties } from 'vue'
@ -101,6 +102,8 @@ export default defineComponent({
props: progressProps,
setup(props) {
const ns = useNamespace('progress')
const barStyle = computed(
(): CSSProperties => ({
width: `${props.percentage}%`,
@ -234,6 +237,7 @@ export default defineComponent({
})
return {
ns,
barStyle,
relativeStrokeWidth,
radius,