三.Progress

前言

组件默认使用 Flex 布局，不需要手动设置 type="flex"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

50%

Full

<template>
    <div class="demo-progress">
      <web-progress :percentage="50" />
      <web-progress :percentage="100" :format="format" />
      <web-progress :percentage="100" status="success" />
      <web-progress :percentage="100" status="warning" />
      <web-progress :percentage="50" status="exception" />
    </div>
  </template>
  
  <script lang="ts" setup>
  const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
  </script>
  
  <style scoped>
  .demo-progress .web-progress--line {
    margin-bottom: 15px;
    max-width: 600px;
  }
  </style>