message: refactor(Progress): refactor with composition api
diff: +import { ref, watch, computed, nextTick, reactive, onMounted } from 'vue';
  import { createNamespace, isDef, addUnit } from '../utils';
  const [createComponent, bem] = createNamespace('progress');
  @@ -22,63 +23,70 @@ export default createComponent({
  },
  },
  - data() {
  - return {
  - pivotWidth: 0,
  - progressWidth: 0,
  - };
  - },
  + setup(props) {
  + const rootRef = ref(null);
  + const pivotRef = ref(null);
  - mounted() {
  - this.setWidth();
  - },
  + const state = reactive({
  + pivotWidth: 0,
  + rootWidth: 0,
  + });
  - watch: {
  - showPivot: 'setWidth',
  - pivotText: 'setWidth',
  - },
  + const background = computed(() =>
  + props.inactive ? '#cacaca' : props.color
  + );
  - methods: {
  - setWidth() {
  - this.$nextTick(() => {
  - this.progressWidth = this.$el.offsetWidth;
  - this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;
  + const setWidth = () => {
  + nextTick(() => {
  + state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
  + state.rootWidth = rootRef.value.offsetWidth;
  });
  - },
  - },
  + };
  - render() {
  - const { pivotText, percentage } = this;
  + const renderPivot = () => {
  + const { rootWidth, pivotWidth } = state;
  + const { textColor, pivotText, pivotColor, percentage } = props;
  const text = isDef(pivotText) ? pivotText : percentage + '%';
  - const showPivot = this.showPivot && text;
  - const background = this.inactive ? '#cacaca' : this.color;
  + const show = props.showPivot && text;
  - const pivotStyle = {
  - color: this.textColor,
  - left: `${((this.progressWidth - this.pivotWidth) * percentage) / 100}px`,
  - background: this.pivotColor || background,
  + if (show) {
  + const left = ((rootWidth - pivotWidth) * percentage) / 100;
  + const style = {
  + color: textColor,
  + left: `${left}px`,
  + background: pivotColor || background.value,
  };
  - const portionStyle = {
  - background,
  - width: (this.progressWidth * percentage) / 100 + 'px',
  + return (
  + <span ref={pivotRef} style={style} class={bem('pivot')}>
  + {text}
  + </span>
  + );
  + }
  };
  - const wrapperStyle = {
  - background: this.trackColor,
  - height: addUnit(this.strokeWidth),
  + watch([() => props.showPivot, () => props.pivotText], setWidth);
  +
  + onMounted(setWidth);
  +
  + return () => {
  + const { trackColor, percentage, strokeWidth } = props;
  + const rootStyle = {
  + background: trackColor,
  + height: addUnit(strokeWidth),
  + };
  + const portionStyle = {
  + background: background.value,
  + width: (state.rootWidth * percentage) / 100 + 'px',
  };
  return (
  - <div class={bem()} style={wrapperStyle}>
  + <div ref={rootRef} class={bem()} style={rootStyle}>
  <span class={bem('portion')} style={portionStyle}>
  - {showPivot && (
  - <span ref="pivot" style={pivotStyle} class={bem('pivot')}>
  - {text}
  - </span>
  - )}
  + {renderPivot()}
  </span>
  </div>
  );
  + };
  },
  });
  