进度条 Progress

基本

<div class="progress" style="padding:20px 0;">
  <za-progress :percent="percent" :theme="theme" :shape="shape" :weight="weight">
    10%
  </za-progress>
</div>
<div class="progress">
  <za-progress type="circle" :percent="percent" :theme="theme" :shape="shape" :weight="weight">
    <div class="progress-content">
      <span class="progress-text">10</span><span class="progress-percent">%</span>
    </div>
  </za-progress>
</div>
<div class="progress">
  <za-progress type="semi-circle" :percent="percent" :theme="theme" :shape="shape" :weight="weight">
    <div class="progress-content">
      <span class="progress-text">10</span><span class="progress-percent">%</span>
    </div>
  </za-progress>
</div>
<za-cell title="进度">
  <za-stepper shape="radius" :step="10" :min="0" :max="100" v-model="percent" @step-change="handleStepChange">
</za-stepper></za-cell>
<za-cell title="主题">
  <za-select :defaultValue="theme" :data-source="dataSource" @ok="handleOk">
</za-select></za-cell>
<za-cell title="线条形状">
  <za-select :defaultValue="shape" :data-source="shapeSource" @ok="handleShape">
</za-select></za-cell>
<za-cell title="线条粗细">
  <za-select :defaultValue="weight" :data-source="weightSource" @ok="handleWeight">
</za-select></za-cell>

Vue Script

<script name="vue">
export default {
  data() {
    return {
      percent: 10,
      theme: 'primary',
      shape: 'round',
      weight: 'normal',
      dataSource:[
        { value: 'primary', label: 'primary' },
        { value: 'success', label: 'success' },
        { value: 'warning', label: 'warning' },
        { value: 'error', label: 'error' },
      ],
      shapeSource:[
        { value: 'rect', label: 'rect' },
        { value: 'round', label: 'round' },
      ],
      weightSource:[
        { value: 'normal', label: 'normal' },
        { value: 'thin', label: 'thin' },
      ],
    }
  },
  methods: {
    handleStepChange(e) {

    },
    handleOk(v) {
      this.theme = v.value;
    },
    handleShape(v) {
      this.shape = v.value;
    },
    handleWeight(v) {
      this.weight = v.value;
    },

  },
};
</script>

API