blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 15:09:16 +08:00
Code Issues Projects Releases Wiki Activity

chore(Progress): use tsx

Browse Source
This commit is contained in:
chenjiahan 2020-10-09 19:51:28 +08:00
parent ff61e25f10
commit eda4de93ae
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/progress/index.js → src/progress/index.tsx
View File

@ -15,7 +15,7 @@ export default createComponent({
percentage: { percentage: {
type: [Number, String], type: [Number, String],
required: true, required: true,
validator: (value) => value >= 0 && value <= 100, validator: (value: number | string) => value >= 0 && value <= 100,
}, },
showPivot: { showPivot: {
type: Boolean, type: Boolean,
@ -24,8 +24,8 @@ export default createComponent({
}, },
setup(props) { setup(props) {
const root = ref(); const root = ref<HTMLElement>();
const pivotRef = ref(); const pivotRef = ref<HTMLElement>();
const state = reactive({ const state = reactive({
rootWidth: 0, rootWidth: 0,
@ -38,7 +38,7 @@ export default createComponent({
const setWidth = () => { const setWidth = () => {
nextTick(() => { nextTick(() => {
state.rootWidth = root.value.offsetWidth; state.rootWidth = root.value ? root.value.offsetWidth : 0;
state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0; state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
}); });
}; };
@ -46,11 +46,11 @@ export default createComponent({
const renderPivot = () => { const renderPivot = () => {
const { rootWidth, pivotWidth } = state; const { rootWidth, pivotWidth } = state;
const { textColor, pivotText, pivotColor, percentage } = props; const { textColor, pivotText, pivotColor, percentage } = props;
const text = pivotText ?? percentage + '%'; const text = pivotText ?? `${percentage}%`;
const show = props.showPivot && text; const show = props.showPivot && text;
if (show) { if (show) {
const left = ((rootWidth - pivotWidth) * percentage) / 100; const left = ((rootWidth - pivotWidth) * +percentage) / 100;
const style = { const style = {
color: textColor, color: textColor,
left: `${left}px`, left: `${left}px`,
@ -77,7 +77,7 @@ export default createComponent({
}; };
const portionStyle = { const portionStyle = {
background: background.value, background: background.value,
width: (state.rootWidth * percentage) / 100 + 'px', width: (state.rootWidth * +percentage) / 100 + 'px',
}; };
return ( return (