✨ [Feature]: Progress 进度条 :format需要带参数的获取文字的方法

[KyLenMou]

What problem does this feature solve

我在使用v-for来渲染多个进度条的时候需要根据当前数据来确定进度条的文字，而:format只能传不带参数的获取文字的方法

<tiny-progress
  :stroke-width="18"
  :percentage="getProgressPercentage(submission.verdict)"
  :color="progressColors"
  :text-inside="true"
  :show-text="true"
  :format="getProgressText(submission.verdict)"
/>

比如这里，就无法渲染自定义文字了

What does the proposed API look like

希望format这个props的方法允许传参数

What is your project name

KOJ

[gweesin]

just wrapper in an arrow function to do like this:

<template>
  <tiny-progress v-for="item in arr" :format="() => reverse(item.title)" show-text text-inside :percentage="50" status="exception" :stroke-width="20"/>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { TinyProgress } from '@opentiny/vue'

const arr = ref([
  {title:'titleOne'},
  {title:'titleTwo'},
  {title:'titleThree'}
])

function reverse(str) {
  return str.repeat(Math.ceil(Math.random() * 10));
}
</script>

<style scoped>
.tiny-progress {
  margin: 20px 0;
}
</style>

https://opentiny.design/vue-playground?mode=pc&theme=os#3.21|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1widnVlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vdnVlLzMuNC4yNy9maWxlcy9kaXN0L3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXCJlY2hhcnRzXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vZWNoYXJ0cy81LjQuMS9maWxlcy9kaXN0L2VjaGFydHMuZXNtLmpzXCIsXCJAdnVlL2NvbXBpbGVyLXNmY1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0B2dWUvY29tcGlsZXItc2ZjLzMuNC4yNy9maWxlcy9kaXN0L2NvbXBpbGVyLXNmYy5lc20tYnJvd3Nlci5qc1wiLFwiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjIxL2ZpbGVzL2Rpc3QzL3RpbnktdnVlLXBjLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1pY29uXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMjEvZmlsZXMvZGlzdDMvdGlueS12dWUtaWNvbi5tanNcIixcIkBvcGVudGlueS92dWUtbG9jYWxlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMjEvZmlsZXMvZGlzdDMvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJ1bnRpbWUvMy4yMS9maWxlcy9kaXN0My90aW55LXZ1ZS1jb21tb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWRpcmVjdGl2ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjIxL2ZpbGVzL2Rpc3QzL3RpbnktdnVlLWRpcmVjdGl2ZS5tanNcIixcIkBvcGVudGlueS92dWUtdGhlbWUvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS10aGVtZS8zLjIxL2ZpbGVzL1wiLFwiQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvMy4yMS9maWxlcy9cIixcIkBvcGVudGlueS92dWUtcmVuZGVybGVzcy9cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJlbmRlcmxlc3MvMy4yMS9maWxlcy9cIixcInNvcnRhYmxlanNcIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9zb3J0YWJsZWpzLzEuMTUuMC9maWxlcy9tb2R1bGFyL3NvcnRhYmxlLmVzbS5qc1wifX0iLCJ0c2NvbmZpZy5qc29uIjoie1xyXG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcclxuICAgIFwiYWxsb3dKc1wiOiB0cnVlLFxyXG4gICAgXCJjaGVja0pzXCI6IHRydWUsXHJcbiAgICBcImpzeFwiOiBcInByZXNlcnZlXCIsXHJcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVcIjogXCJFU05leHRcIixcclxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcclxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZVxyXG4gIH0sXHJcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJ0YXJnZXRcIjogMy4zXHJcbiAgfVxyXG59XHJcbiIsInByb2dyZXNzLXR5cGUtY2lyY2xlLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPHRpbnktcHJvZ3Jlc3Mgdi1mb3I9XCJpdGVtIGluIGFyclwiIDpmb3JtYXQ9XCIoKSA9PiByZXZlcnNlKGl0ZW0udGl0bGUpXCIgc2hvdy10ZXh0IHRleHQtaW5zaWRlIDpwZXJjZW50YWdlPVwiNTBcIiBzdGF0dXM9XCJleGNlcHRpb25cIiA6c3Ryb2tlLXdpZHRoPVwiMjBcIi8+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwIGxhbmc9XCJqc3hcIj5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IFRpbnlQcm9ncmVzcyB9IGZyb20gJ0BvcGVudGlueS92dWUnXG5cbmNvbnN0IGFyciA9IHJlZihbXG4gIHt0aXRsZTondGl0bGVPbmUnfSxcbiAge3RpdGxlOid0aXRsZVR3byd9LFxuICB7dGl0bGU6J3RpdGxlVGhyZWUnfVxuXSlcblxuZnVuY3Rpb24gcmV2ZXJzZShzdHIpIHtcbiAgcmV0dXJuIHN0ci5yZXBlYXQoTWF0aC5jZWlsKE1hdGgucmFuZG9tKCkgKiAxMCkpO1xufVxuPC9zY3JpcHQ+XG5cbjxzdHlsZSBzY29wZWQ+XG4udGlueS1wcm9ncmVzcyB7XG4gIG1hcmdpbjogMjBweCAwO1xufVxuPC9zdHlsZT5cbiIsIl9vIjp7fX0=