diff --git a/demo/demo.vue b/demo/demo.vue index 14c7c96..6511057 100644 --- a/demo/demo.vue +++ b/demo/demo.vue @@ -70,6 +70,7 @@ resize-left resize-right linked-resize + progress > +
+ {{ progressValue }}% +
@@ -48,7 +60,11 @@ @pointerdown.stop="onResizeLeftDown" > -
+
@@ -59,7 +75,11 @@ @pointerdown.stop="onResizeRightDown" > -
+
@@ -74,6 +94,7 @@ 'xg-slider-anchor__show': $param.hoverItem?.uuid === props.data?.uuid } ]" + :style="{ borderColor: bgColor }" @pointerdown="onOutAnchorDown" >
@@ -90,7 +111,7 @@ import useDrag from '@/composables/useDrag'; import useParam from '@/composables/useParam'; import useStyle from '@/composables/useStyle'; import { formatDate } from '@/utils/date'; -import { flow, isBoolean, isFunction } from 'lodash'; +import { flow, isBoolean, isFunction, isNumber } from 'lodash'; import useEvent from '@/composables/useEvent'; import { MoveSliderInternalData, RowData } from '@/typings/data'; import useLinks from '@/composables/useLinks'; @@ -119,6 +140,10 @@ const height = computed(() => { return props.height; }); +const bgColor = computed(() => { + return props?.bgColor || '#eca710'; +}); + const { toRowData, getProp } = useData(); const originData = computed( () => props.label || getProp(props.data!, props.prop, props.emptyData) @@ -312,6 +337,24 @@ function onPointerUp() { } } // #endregion + +// #region progress +const progressValue = computed(() => { + let v = props.data?.progress ?? 0; + if (v > 1) v = 1; + else if (v < 0) v = 0; + + // 显示方式,默认整数 + if (isNumber(props.progressDecimal)) { + let fixed = Math.floor(props.progressDecimal); + if (fixed < 0) fixed = 0; + else if (fixed > 10) fixed = 10; + return (v * 100).toFixed(fixed); + } + + return props.progressDecimal ? (v * 100).toFixed(2) : Math.floor(v * 100); +}); +// #endregion