针对 Element UI 提供的各种常用组件进行样式重定义，如颜色、内边距、外边距、字体等。

1. Input 输入框

通过鼠标或键盘输入字符

• Input 为受控组件，它总会显示 Vue 绑定值。
• 通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用 v-model）。否则，输入框内显示的值将不会改变。
• 不支持 v-model 修饰符。

1.1 定制说明

• padding：将类.el-input--medium .el-input__inner 定义的 padding-left、padding-right 调整为 5px；
• border-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• border-radius：调整类.el-input__inner 中定义的边框弧度为 2px；

1.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

1.3 效果演示

1.3.1 基本用法

<template>
  <el-input v-model="input" placeholder="请输入内容"></el-input>
</template>

<script>
  export default {
    data() {
      return {
        input: "",
      };
    },
  };
</script>

1.3.2 带 Icon 的输入框

• 属性方式

<template>
  <div class="demo-input-suffix">
    <el-row>
      <el-col :span="12">
        <el-input
          placeholder="请选择日期"
          suffix-icon="el-icon-date"
          v-model="input11"
        >
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input12"
        >
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input11: "",
        input12: "",
      };
    },
  };
</script>

• slot 方式

<template>
  <div class="demo-input-suffix">
    <el-row>
      <el-col :span="12">
        <el-input placeholder="请选择日期" v-model="input13" size="small">
          <i slot="suffix" class="el-input__icon el-icon-date"></i>
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-input placeholder="请输入内容" v-model="input14">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input13: "",
        input14: "",
      };
    },
  };
</script>

1.3.3 不同尺寸

<template>
  <el-row>
    <el-col :span="6">
      <el-input
        placeholder="请输入内容"
        suffix-icon="el-icon-date"
        v-model="input1"
      >
      </el-input>
    </el-col>
    <el-col :span="6">
      <el-input
        size="medium"
        placeholder="请输入内容"
        suffix-icon="el-icon-date"
        v-model="input2"
      >
      </el-input>
    </el-col>
    <el-col :span="6">
      <el-input
        size="small"
        placeholder="请输入内容"
        suffix-icon="el-icon-date"
        v-model="input3"
      >
      </el-input>
    </el-col>
    <el-col :span="6">
      <el-input
        size="mini"
        placeholder="请输入内容"
        suffix-icon="el-icon-date"
        v-model="input4"
      >
      </el-input>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        input1: "",
        input2: "",
        input3: "",
        input4: "",
      };
    },
  };
</script>

2. Select 下拉框

当选项过多时，使用下拉菜单展示并选择内容。

2.1 定制说明

• padding：将类.el-input--medium .el-input__inner 定义的 padding-left、padding-right 调整为 5px；
• border-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• border-radius：调整类.el-input__inner 中定义的边框弧度；

2.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

2.3 效果演示

<template>
  <el-select size="medium" v-model="value" placeholder="请选择证件类型">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: "1",
            label: "身份证",
          },
          {
            value: "2",
            label: "学生证",
          },
        ],
        value: "",
      };
    },
  };
</script>

3. Button 按钮

3.1 定制说明

• 按钮颜色：调整所有 type 对应的按钮颜色；

3.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

3.3 效果演示

3.3.1 基础按钮

<template>
  <el-row>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

3.3.2 朴素按钮

<template>
  <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

3.3.3 圆角按钮

<template>
  <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

<template>
  <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

3.3.4 图标按钮

<template>
  <el-row>
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary"
      >上传<i class="el-icon-upload el-icon--right"></i
    ></el-button>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

3.3.5 按钮组

<template>
  <el-button-group>
    <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
    <el-button type="primary"
      >下一页<i class="el-icon-arrow-right el-icon--right"></i
    ></el-button>
  </el-button-group>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

3.3.6 不同尺寸

<template>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button size="medium">中等按钮</el-button>
    <el-button size="small">小型按钮</el-button>
    <el-button size="mini">超小按钮</el-button>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

4. Radio 单选框

4.1 定制说明

• border-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• background-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• 选择后的字体颜色调整为 ape-ui-colors.css 下变量--global 指定的颜色；

4.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

4.3 效果演示

4.3.1 基本用法

<template>
  <el-row>
    <el-col :span="4">
      <el-radio v-model="radio" label="1">备选项</el-radio>
    </el-col>
    <el-col :span="4">
      <el-radio v-model="radio" label="2">备选项</el-radio>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        radio: "1",
      };
    },
  };
</script>

4.3.2 按钮样式

<template>
  <el-row>
    <el-radio-group v-model="radio" size="medium">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        radio: "北京",
      };
    },
  };
</script>

4.3.3 带有边框

<template>
  <el-row>
    <el-radio-group v-model="radio" size="small">
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border disabled>备选项2</el-radio>
    </el-radio-group>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        radio: "1",
      };
    },
  };
</script>

5. Checkbox 多选框

5.1 定制说明

• border-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• background-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• 选择后的字体颜色调整为 ape-ui-colors.css 下变量--global 指定的颜色；

5.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

5.3 效果演示

5.3.1 基本用法

在 el-checkbox 元素中定义 v-model 绑定变量，单一的 checkbox 中，默认绑定变量的值会是 Boolean，选中为 true。

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true,
      };
    },
  };
</script>

5.3.2 多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

<template>
  <div>
    <el-row>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
        <el-checkbox label="禁用" disabled></el-checkbox>
        <el-checkbox label="选中且禁用" disabled></el-checkbox>
      </el-checkbox-group>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-button type="primary" size="small" @click="get">获取选中值</el-button>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkList: ["选中且禁用", "复选框 A"],
      };
    },
    methods: {
      get() {
        alert(this.checkList);
      },
    },
  };
</script>

5.3.2 indeterminate 状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。

<template>
  <div>
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in cities" :label="city" :key="city"
        >{{city}}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>
<script>
  const cityOptions = ["上海", "北京", "广州", "深圳"];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ["上海", "北京"],
        cities: cityOptions,
        isIndeterminate: true,
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.cities.length;
      },
    },
  };
</script>

6. Switch 开关

6.1 定制说明

• border-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• background-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• 选择后的字体颜色调整为 ape-ui-colors.css 下变量--global 指定的颜色；

6.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

6.3 效果演示

6.3.1 基本用法

<template>
  <el-switch v-model="value" active-color="#5e72e4" inactive-color="#fb6340">
  </el-switch>
</template>
<script>
  export default {
    data() {
      return {
        value: true,
      };
    },
  };
</script>

6.3.1 文字描述

使用 active-text 属性与 inactive-text 属性来设置开关的文字描述。

<template>
  <div>
    <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">
    </el-switch>

    <el-switch
      style="display: block"
      v-model="value2"
      active-color="#5e72e4"
      inactive-color="#fb6340"
      active-text="按月付费"
      inactive-text="按年付费"
    >
    </el-switch>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value1: true,
        value2: true,
      };
    },
  };
</script>

7. Slider 滑块

通过拖动滑块在一个固定区间内进行选择。

7.1 定制说明

• border-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• background-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• 选择后的字体颜色调整为 ape-ui-colors.css 下变量--global 指定的颜色；

7.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

7.3 效果演示

7.3.1 基础用法

在拖动滑块时，显示当前值。

<template>
  <div>
    <div class="block">
      <span class="demonstration">默认</span>
      <el-slider v-model="value1"></el-slider>
    </div>
    <div class="block">
      <span class="demonstration">自定义初始值</span>
      <el-slider v-model="value2"></el-slider>
    </div>
    <div class="block">
      <span class="demonstration">隐藏 Tooltip</span>
      <el-slider v-model="value3" :show-tooltip="false"></el-slider>
    </div>
    <div class="block">
      <span class="demonstration">格式化 Tooltip</span>
      <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
    </div>
    <div class="block">
      <span class="demonstration">禁用</span>
      <el-slider v-model="value5" disabled></el-slider>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42,
      };
    },
    methods: {
      formatTooltip(val) {
        return val / 100;
      },
    },
  };
</script>

7.3.2 离散值

选项可以是离散的。改变 step 的值可以改变步长，通过设置 show-stops 属性可以显示间断点。

<template>
  <div>
    <div class="block">
      <span class="demonstration">不显示间断点</span>
      <el-slider v-model="value1" :step="10"> </el-slider>
    </div>
    <div class="block">
      <span class="demonstration">显示间断点</span>
      <el-slider v-model="value2" :step="10" show-stops> </el-slider>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 0,
      };
    },
  };
</script>

7.3.3 带有输入框

通过输入框设置精确数值。设置 show-input 属性会在右侧显示一个输入框。

<template>
  <div class="block">
    <el-slider v-model="value" show-input> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
      };
    },
  };
</script>

7.3.4 展示标记

设置 marks 属性可以展示标记。

<template>
  <div class="block">
    <el-slider v-model="value" range :marks="marks"> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [30, 60],
        marks: {
          0: "0°C",
          8: "8°C",
          37: "37°C",
          50: {
            style: {
              color: "#f5365c",
            },
            label: this.$createElement("strong", "50%"),
          },
        },
      };
    },
  };
</script>

8. TimePicker 时间选择器

8.1 定制说明

• border-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• background-color：调整边框颜色为 ape-ui-colors.css 下变量--global 指定的颜色；
• 选择后的字体颜色调整为 ape-ui-colors.css 下变量--global 指定的颜色；

8.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

8.3 效果演示

8.3.1 固定时间点

提供几个固定的时间点供用户选择。

<template>
  <el-time-select
    v-model="value"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }"
    placeholder="选择时间"
  >
  </el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        value: "",
      };
    },
  };
</script>

8.3.1 任意时间点

可以选择任意时间。

<template>
  <el-row>
    <el-col :span="12">
      <el-time-picker
        v-model="value1"
        :picker-options="{
          selectableRange: '18:30:00 - 20:30:00'
        }"
        placeholder="任意时间点"
      >
      </el-time-picker>
    </el-col>
    <el-col :span="12">
      <el-time-picker
        arrow-control
        v-model="value2"
        :picker-options="{
        selectableRange: '18:30:00 - 20:30:00'
      }"
        placeholder="任意时间点"
      >
      </el-time-picker>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        value1: new Date(2016, 9, 10, 18, 40),
        value2: new Date(2016, 9, 10, 18, 40),
      };
    },
  };
</script>

8.3.2 固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变。

<template>
  <div>
    <el-time-select
      placeholder="起始时间"
      v-model="startTime"
      :picker-options="{
        start: '08:30',
        step: '00:15',
        end: '18:30'
      }"
    >
    </el-time-select>
    <el-time-select
      placeholder="结束时间"
      v-model="endTime"
      :picker-options="{
        start: '08:30',
        step: '00:15',
        end: '18:30',
        minTime: startTime
      }"
    >
    </el-time-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        startTime: "",
        endTime: "",
      };
    },
  };
</script>

8.3.3 任意时间范围

可选择任意的时间范围。

<template>
  <el-row>
    <el-col :span="12">
      <el-time-picker
        is-range
        v-model="value1"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      >
      </el-time-picker>
    </el-col>
    <el-col :span="12">
      <el-time-picker
        is-range
        arrow-control
        v-model="value2"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      >
      </el-time-picker>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      };
    },
  };
</script>

9. DatePicker 日期选择器

用于选择或输入日期。

9.1 定制说明

9.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

9.3 效果演示

9.3.1 选择日

以「日」为基本单位，基础的日期选择控件。

基本单位由 type 属性指定。快捷选项需配置 picker-options 对象中的 shortcuts，禁用日期通过 disabledDate 设置，传入函数。

<template>
  <el-row>
    <el-col :span=12>
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-col>
    <el-col :span=12>
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },
        value1: "",
        value2: "",
      };
    },
  };
</script>
<style scoped>

</style>

10. DateTimePicker 日期时间选择器

在同一个选择器里选择日期和时间。

DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

10.1 定制说明

10.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

10.3 效果演示

10.3.1 日期和时间点

• 默认

<template>
  <div class="block">
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: ''
    };
  }
};
</script>

• 带快捷选项

<template>
  <div class="block">
    <el-date-picker
      v-model="value2"
      type="datetime"
      placeholder="选择日期时间"
      align="right"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
<script>

export default {
  data() {
    return {
      value2: '',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    };
  }
};
</script>
<style>

</style>

10.3.2 日期和时间范围

<template>
  <div class="block">
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: ''
      };
    }
  };
</script>

11. Progress 进度条

11.1 定制说明

11.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

11.3 效果演示

用于展示操作进度，告知用户当前状态和预期。

11.3.1 线形进度条

Progress 组件设置percentage属性即可，表示进度条对应的百分比，必填，必须在 0-100。通过 format 属性来指定进度条文字内容。

<template>
  <el-row>
    <el-progress :percentage="50"></el-progress>
    <el-progress :percentage="100" :format="format"></el-progress>
    <el-progress :percentage="100" status="success"></el-progress>
    <el-progress :percentage="100" status="warning"></el-progress>
    <el-progress :percentage="50" status="exception"></el-progress>
  </el-row>
</template>

<script>
  export default {
    methods: {
      format(percentage) {
        return percentage === 100 ? '满' : `${percentage}%`;
      }
    }
  };
</script>

11.3.2 百分比内显

百分比不占用额外控件，适用于文件上传等场景。

Progress 组件可通过 stroke-width 属性更改进度条的高度，并可通过 text-inside 属性来将进度条描述置于进度条内部。

<template>
  <div class="demo">
    <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
    <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
    <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
  </div>
</template>

<script>
  export default {
    methods: {

    }
  };
</script>
<style>
.demo > .el-progress--line {
  margin-bottom: 10px !important;
}
</style>

11.3.3 环形进度条

Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。

<template>
  <div class="demo">
    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="70" status="warning"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>
  </div>
</template>

<script>
  export default {
    methods: {

    }
  };
</script>
<style>
.demo > .el-progress--line {
  margin-bottom: 10px !important;
}
</style>

12. Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

12.1 定制说明

• title 字体颜色，统一采用ape-ui-colors.css中定义的变量--success
• 步骤条背景颜色，，统一采用ape-ui-colors.css中定义的变量--success

12.2 说明文档

组件的使用方法未做任何调整，可参考 Element UI官方文档 (opens new window)。

12.3 效果演示

12.3.1 基础用法

设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Number，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。

<template>
    <el-row>
        <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
        </el-steps>

        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </el-row>
</template>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>

12.3.2 含状态步骤条

每一步骤显示出该步骤的状态。

也可以使用title具名分发，可以用slot的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。

<template>
    <el-row>
        <el-steps :space="200" :active="active" finish-status="success">
        <el-step title="已完成"></el-step>
        <el-step title="进行中"></el-step>
        <el-step title="步骤 3"></el-step>
        </el-steps>
    </el-row>
</template>

<script>
  export default {
    data() {
      return {
        active: 1
      };
    },

    methods: {
    }
  }
</script>

12.3.2 含状态步骤条

每个步骤有其对应的步骤状态描述。

<template>
    <el-row>
        <el-steps :active="2">
            <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
            <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
            <el-step title="步骤 3" description="这段就没那么长了"></el-step>
            </el-steps>
    </el-row>
</template>

<script>
  export default {
    data() {
      return {
      };
    },

    methods: {
    }
  }
</script>

12.3.3 简洁风格的步骤条

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

<template>
    <el-row>
        <el-steps :active="1" simple>
            <el-step title="步骤 1" icon="el-icon-edit"></el-step>
            <el-step title="步骤 2" icon="el-icon-upload"></el-step>
            <el-step title="步骤 3" icon="el-icon-picture"></el-step>
        </el-steps>
    </el-row>
</template>

<script>
  export default {
    data() {
      return {
      };
    },

    methods: {
    }
  }
</script>