针对 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 基本用法

# 1.3.2 带 Icon 的输入框

  • 属性方式
  • slot 方式

# 1.3.3 不同尺寸

# 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 效果演示

# 3. Button 按钮

# 3.1 定制说明

  • 按钮颜色:调整所有 type 对应的按钮颜色;

# 3.2 说明文档

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

# 3.3 效果演示

# 3.3.1 基础按钮

# 3.3.2 朴素按钮

# 3.3.3 圆角按钮

# 3.3.4 图标按钮

# 3.3.5 按钮组

# 3.3.6 不同尺寸

# 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 基本用法

# 4.3.2 按钮样式

# 4.3.3 带有边框

# 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。

# 5.3.2 多选框组

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

# 5.3.2 indeterminate 状态

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

# 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 基本用法

# 6.3.1 文字描述

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

# 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 基础用法

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

# 7.3.2 离散值

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

# 7.3.3 带有输入框

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

# 7.3.4 展示标记

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

# 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 固定时间点

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

# 8.3.1 任意时间点

可以选择任意时间。

# 8.3.2 固定时间范围

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

# 8.3.3 任意时间范围

可选择任意的时间范围。

# 9. DatePicker 日期选择器

用于选择或输入日期。

# 9.1 定制说明

# 9.2 说明文档

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

# 9.3 效果演示

# 9.3.1 选择日

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

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

# 10. DateTimePicker 日期时间选择器

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

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

# 10.1 定制说明

# 10.2 说明文档

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

# 10.3 效果演示

# 10.3.1 日期和时间点

  • 默认
  • 带快捷选项

# 10.3.2 日期和时间范围

# 11. Progress 进度条

# 11.1 定制说明

# 11.2 说明文档

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

# 11.3 效果演示

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

# 11.3.1 线形进度条

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

# 11.3.2 百分比内显

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

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

# 11.3.3 环形进度条

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

# 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属性可以改变已经完成的步骤的状态。

# 12.3.2 含状态步骤条

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

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

# 12.3.2 含状态步骤条

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

# 12.3.3 简洁风格的步骤条

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

更新时间: 4/22/2022, 5:01:18 PM