装点门面！Element UI 样式小总结

前言

在项目开发过程中，会发现一些不错的样式实例，为了提高开发效率，我把这些实例总结下来，方便以后使用。希望也能对大家有所帮助。

我会持续更新这个总结，后续准备出一版所有 Element UI 组件的样式总结，敬请期待！

Element UI 样式总结

按钮样式

• 基本按钮样式：

<el-button type="primary">按钮</el-button>

• 禁用按钮样式：

<el-button type="primary" disabled>按钮</el-button>

• 加载中按钮样式：

<el-button type="primary" loading>加载中</el-button>

• 圆形按钮样式：

<el-button type="primary" round>按钮</el-button>

• 图标按钮样式：

<el-button type="primary" icon="el-icon-check"></el-button>

输入框样式

• 基本输入框样式：

<el-input placeholder="请输入"></el-input>

• 禁用输入框样式：

<el-input placeholder="请输入" disabled></el-input>

• 只读输入框样式：

<el-input placeholder="请输入" readonly></el-input>

• 密码输入框样式：

<el-input placeholder="请输入密码" show-password></el-input>

• 搜索框样式：

<el-input placeholder="搜索" prefix-icon="el-icon-search"></el-input>

下拉框样式

• 基本下拉框样式：

<el-select placeholder="请选择">
  <el-option label="选项一" value="a"></el-option>
  <el-option label="选项二" value="b"></el-option>
  <el-option label="选项三" value="c"></el-option>
</el-select>

• 禁用下拉框样式：

<el-select placeholder="请选择" disabled>
  <el-option label="选项一" value="a"></el-option>
  <el-option label="选项二" value="b"></el-option>
  <el-option label="选项三" value="c"></el-option>
</el-select>

• 多选下拉框样式：

<el-select placeholder="请选择" multiple>
  <el-option label="选项一" value="a"></el-option>
  <el-option label="选项二" value="b"></el-option>
  <el-option label="选项三" value="c"></el-option>
</el-select>

• 带搜索的下拉框样式：

<el-select placeholder="请选择" filterable>
  <el-option label="选项一" value="a"></el-option>
  <el-option label="选项二" value="b"></el-option>
  <el-option label="选项三" value="c"></el-option>
</el-select>

日期选择器样式

• 基本日期选择器样式：

<el-date-picker type="date" placeholder="请选择日期"></el-date-picker>

• 禁用日期选择器样式：

<el-date-picker type="date" placeholder="请选择日期" disabled></el-date-picker>

• 带时间的日期选择器样式：

<el-date-picker type="datetime" placeholder="请选择日期时间"></el-date-picker>

• 范围日期选择器样式：

<el-date-picker type="daterange" placeholder="请选择日期范围"></el-date-picker>

时间选择器样式

• 基本时间选择器样式：

<el-time-picker placeholder="请选择时间"></el-time-picker>

• 禁用时间选择器样式：

<el-time-picker placeholder="请选择时间" disabled></el-time-picker>

• 范围时间选择器样式：

<el-time-picker type="timerange" placeholder="请选择时间范围"></el-time-picker>

总结

以上是我在项目中发现的不错的样式实例，希望对大家有所帮助。后续我会持续更新这个总结，敬请期待！