first commit
This commit is contained in:
lingxiao865
259
uni_modules/tdesign-uniapp/components/progress/progress.vue
Normal file
259
uni_modules/tdesign-uniapp/components/progress/progress.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="classPrefix"
|
||||
>
|
||||
<view
|
||||
v-if="theme === PRO_THEME.LINE"
|
||||
:class="[
|
||||
classPrefix + '--thin ' + classPrefix + '--status--' + (status || computedStatus),
|
||||
tClass
|
||||
]"
|
||||
>
|
||||
<view
|
||||
aria-role="progressbar"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-valuenow="computedProgress"
|
||||
:aria-label="ariaLabel || (isIOS ? getIOSAriaLabel(status) : getAndroidAriaLabel(status))"
|
||||
aria-live="polite"
|
||||
:class="classPrefix + '__bar'"
|
||||
:style="'height: ' + heightBar + 'px;border-radius: ' + heightBar + 'px;background-color: ' + bgColorBar"
|
||||
>
|
||||
<view
|
||||
:class="[
|
||||
classPrefix + '__inner ',
|
||||
tClassBar
|
||||
]"
|
||||
:style="'background: ' + colorBar + '; width: ' + (computedProgress + '%')"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
v-if="label"
|
||||
:class="classPrefix + '__info ' + tClassLabel"
|
||||
:aria-hidden="true"
|
||||
>
|
||||
<block
|
||||
v-if="tools.includes(STATUS, status)"
|
||||
name="icon"
|
||||
>
|
||||
<t-icon
|
||||
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--'"
|
||||
:name="LINE_STATUS_ICON[status]"
|
||||
:size="22 || ''"
|
||||
/>
|
||||
</block>
|
||||
<text v-else>
|
||||
{{ tools.isString(label) ? label : computedProgress + '%' }}
|
||||
</text>
|
||||
</view>
|
||||
<slot name="label" />
|
||||
</view>
|
||||
<view
|
||||
v-if="theme === PRO_THEME.PLUMP"
|
||||
aria-role="progressbar"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-valuenow="computedProgress"
|
||||
:aria-label="ariaLabel || (isIOS ? getIOSAriaLabel(status) : getAndroidAriaLabel(status))"
|
||||
aria-live="polite"
|
||||
:class="
|
||||
classPrefix +
|
||||
'__bar ' +
|
||||
classPrefix +
|
||||
'--plump ' +
|
||||
(computedProgress > 10 ? classPrefix + '--over-ten' : classPrefix + '--under-ten') +
|
||||
' ' +
|
||||
classPrefix +
|
||||
'--status--' +
|
||||
(status || computedStatus) +
|
||||
' ' +
|
||||
tClass
|
||||
"
|
||||
:style="'height: ' + heightBar + 'px;border-radius: ' + heightBar + 'px;background-color: ' + bgColorBar"
|
||||
>
|
||||
<view
|
||||
:class="classPrefix + '__inner ' + tClassBar"
|
||||
:style="'background: ' + colorBar + '; width: ' + computedProgress + '%'"
|
||||
>
|
||||
<view
|
||||
v-if="label && computedProgress > 10"
|
||||
:class="classPrefix + '__info ' + tClassLabel"
|
||||
>
|
||||
<text>{{ tools.isString(label) ? label : computedProgress + '%' }}</text>
|
||||
</view>
|
||||
<slot
|
||||
v-if="computedProgress > 10"
|
||||
name="label"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
v-if="label && computedProgress <= 10"
|
||||
:class="classPrefix + '__info ' + tClassLabel"
|
||||
:aria-hidden="true"
|
||||
>
|
||||
<text>{{ tools.isString(label) ? label : computedProgress + '%' }}</text>
|
||||
</view>
|
||||
<slot
|
||||
v-if="computedProgress <= 10"
|
||||
name="label"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
v-if="theme === PRO_THEME.CIRCLE"
|
||||
:class="classPrefix + '--status--' + (status || computedStatus) + ' ' + tClass"
|
||||
>
|
||||
<view
|
||||
aria-role="progressbar"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-valuenow="computedProgress"
|
||||
:aria-label="ariaLabel || (isIOS ? getIOSAriaLabel(status) : getAndroidAriaLabel(status))"
|
||||
aria-live="polite"
|
||||
:class="tools.cls(classPrefix + '__canvas--circle', [[size, true]])"
|
||||
:style="
|
||||
getCircleStyle(size, heightBar) +
|
||||
'; background-image: conic-gradient(from var(--td-progress-circle-from), ' +
|
||||
(colorCircle || STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)') +
|
||||
' ' +
|
||||
computedProgress +
|
||||
'%, ' +
|
||||
(bgColorBar || 'var(--td-progress-track-bg-color)') +
|
||||
' 0%);'
|
||||
"
|
||||
>
|
||||
<view :class="classPrefix + '__canvas--inner ' + tClassBar">
|
||||
<view
|
||||
v-if="label"
|
||||
:class="classPrefix + '__info ' + tClassLabel"
|
||||
:aria-hidden="true"
|
||||
>
|
||||
<block
|
||||
v-if="tools.includes(STATUS, status)"
|
||||
name="icon"
|
||||
>
|
||||
<t-icon
|
||||
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--'"
|
||||
:name="CIRCLE_STATUS_ICON[status]"
|
||||
size="96rpx"
|
||||
/>
|
||||
</block>
|
||||
<text v-else>
|
||||
{{ tools.isString(label) ? label : computedProgress + '%' }}
|
||||
</text>
|
||||
</view>
|
||||
<slot name="label" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TIcon from '../icon/icon';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import { getBackgroundColor } from './utils';
|
||||
import { unitConvert, isIOS as isIOSValidator } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
|
||||
import {
|
||||
STATUS,
|
||||
STATUS_TEXT,
|
||||
PRO_THEME,
|
||||
|
||||
STATUS_COLOR,
|
||||
LINE_STATUS_ICON,
|
||||
CIRCLE_STATUS_ICON,
|
||||
|
||||
getCircleStyle,
|
||||
getIOSAriaLabel,
|
||||
getAndroidAriaLabel,
|
||||
} from './computed.js';
|
||||
|
||||
|
||||
const name = `${prefix}-progress`;
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-bar`,
|
||||
`${prefix}-class-label`,
|
||||
],
|
||||
components: {
|
||||
TIcon,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
colorBar: '',
|
||||
heightBar: '',
|
||||
computedStatus: '',
|
||||
computedProgress: 0,
|
||||
isIOS: isIOSValidator(),
|
||||
STATUS,
|
||||
STATUS_TEXT,
|
||||
PRO_THEME,
|
||||
|
||||
STATUS_COLOR,
|
||||
LINE_STATUS_ICON,
|
||||
CIRCLE_STATUS_ICON,
|
||||
|
||||
getCircleStyle,
|
||||
getIOSAriaLabel,
|
||||
getAndroidAriaLabel,
|
||||
tools,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
percentage: {
|
||||
handler(percentage) {
|
||||
percentage = Math.max(0, Math.min(percentage, 100));
|
||||
|
||||
this.computedStatus = percentage === 100 ? 'success' : '';
|
||||
this.computedProgress = percentage;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
color: {
|
||||
handler(color) {
|
||||
this.colorBar = getBackgroundColor(color);
|
||||
this.colorCircle = typeof color === 'object' ? '' : color; // 环形不支持渐变，单独处理
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
strokeWidth: {
|
||||
handler(strokeWidth) {
|
||||
if (!strokeWidth) {
|
||||
return '';
|
||||
}
|
||||
this.heightBar = unitConvert(strokeWidth);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
trackColor: {
|
||||
handler(trackColor) {
|
||||
this.bgColorBar = trackColor;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './progress.css';
|
||||
</style>
|
||||
Reference in New Issue
Block a user