⌈Vue3&React18⌋动手实践构建组件库之❣️Progress组件❣️

预览

Progress | Vue3xy (chengbotao.github.io)

介绍

进度条

Props 属性

属性名	属性类型	说明	默认值
percent	number	当前进度值	-
strokeHeight	number	进度条高度	15
showText	boolean	是否显示百分比文字	true
theme	oneOf "primary" | "danger" | "secondary" | "success" | "info" | "warning" | "light" | "dark"	主题	primary

源码呈现

Vue3 实现

<template>
  <div class="xy-progress-bar">
    <div class="xy-progress-bar-outer" :style="{ height: `${strokeHeight}px` }">
      <div :class="classes" :style="{ width: `${percent}%` }">
        <span v-if="showText" class="inner-text">{{ percent }}%</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'XyProgress',
  inheritAttrs: false,
})

</script>

<script setup lang="ts">
import { computed } from "vue"
import classNames from "classnames";

interface ProgressProps {
  percent: number;
  strokeHeight?: number;
  showText?: boolean;
  theme?: string;
}

// defineOptions({
//     name: 'XyProgress',
//     inheritAttrs: false,
// })

// Props
const props = withDefaults(defineProps<ProgressProps>(), {
  strokeHeight: 15,
  showText: true,
  theme: 'primary',
});

// Emits

// computed
const classes = computed(() => {
  return classNames("xy-progress-bar-inner", {
    [`color-${props.theme}`]: props.theme,
  });
})


// methods

// public 方法
defineExpose({})

</script>

Vue3 单元测试

// todo

React 实现

// todo

React 单元测试

// todo

后记

个人博客 | Botaoxy (chengbotao.github.io)

---

感谢阅读,敬请斧正!