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