摘要: 用于颜色选择,支持多种格式。 基础用法 使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型。 1 <div class="block"> 2 <span class="demonstration">有默认值</span> 3 <el-color-picker 阅读全文
posted @ 2018-03-13 07:06 大姐姐小姐姐 阅读(12711) 评论(0) 推荐(0) 编辑
摘要: 评分组件 基础用法 评分被分为三个等级,可以利用颜色对分数及情感倾向进行分级(默认情况下不区分颜色)。三个等级所对应的颜色用过colors属性设置,而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。 1 <div class="block"> 2 <sp 阅读全文
posted @ 2018-03-13 07:04 大姐姐小姐姐 阅读(3509) 评论(0) 推荐(0) 编辑
摘要: 通过点击或者拖拽上传文件 点击上传 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。 1 <el-upload 2 class="upload-dem 阅读全文
posted @ 2018-03-13 06:57 大姐姐小姐姐 阅读(7986) 评论(0) 推荐(1) 编辑
摘要: 在同一个选择器里选择日期和时间 DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。 日期和时间点 通过设置type属性为datetime,即可在同一个选择器里同时 阅读全文
posted @ 2018-03-13 06:51 大姐姐小姐姐 阅读(29811) 评论(0) 推荐(1) 编辑
摘要: 用于选择或输入日期 选择日 以「日」为基本单位,基础的日期选择控件 基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDate 设置,传入函数 1 <template> 2 <div class="block"> 3 <s 阅读全文
posted @ 2018-03-13 06:47 大姐姐小姐姐 阅读(2438) 评论(0) 推荐(0) 编辑
摘要: 用于选择或输入日期 固定时间点 提供几个固定的时间点供用户选择 使用 el-time-select 标签,分别通过star、end和step指定可选的起始时间、结束时间和步长 1 <el-time-select 2 v-model="value1" 3 :picker-options="{ 4 st 阅读全文
posted @ 2018-03-13 06:40 大姐姐小姐姐 阅读(27021) 评论(0) 推荐(0) 编辑
摘要: 通过拖动滑块在一个固定区间内进行选择 ¶基础用法 在拖动滑块时,显示当前值 通过设置绑定值自定义滑块的初始值 1 <template> 2 <div class="block"> 3 <span class="demonstration">默认</span> 4 <el-slider v-model 阅读全文
posted @ 2018-03-13 06:35 大姐姐小姐姐 阅读(2081) 评论(0) 推荐(0) 编辑
摘要: 表示两种相互对立的状态间的切换,多用于触发「开/关」。 基本用法 绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 1 <el-switch 2 v-model="value2" 3 active-color 阅读全文
posted @ 2018-03-13 06:04 大姐姐小姐姐 阅读(2782) 评论(0) 推荐(0) 编辑
摘要: 当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。 通过expand-trigger可以定义展开子级菜单的触发方式。 本例还展示了change事件,它的参数为 Ca 阅读全文
posted @ 2018-03-13 05:09 大姐姐小姐姐 阅读(29145) 评论(0) 推荐(1) 编辑
摘要: Select 选择器 当选项过多时,使用下拉菜单展示并选择内容。 基础用法 适用广泛的基础单选 v-model的值为当前被选中的el-option的 value 属性值 1 <template> 2 <el-select v-model="value" placeholder="请选择"> 3 <e 阅读全文
posted @ 2018-03-13 05:00 大姐姐小姐姐 阅读(18056) 评论(0) 推荐(1) 编辑
摘要: InputNumber 计数器 仅允许输入标准的数字值,可定义范围 禁用状态 disabled属性接受一个Boolean,设置为true即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置min属性和max属性,不设置min和max时,最小值为 0。 1 <template> 2 <el-i 阅读全文
posted @ 2018-03-13 04:34 大姐姐小姐姐 阅读(2292) 评论(0) 推荐(0) 编辑
摘要: Input 输入框 通过鼠标或键盘输入字符 禁用状态 可清空 带 icon 的输入框 带有图标标记输入类型 文本域 用于输入多行文本信息,通过将 type 属性的值指定为 textarea。 可自适应文本高度的文本域 通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整, 阅读全文
posted @ 2018-03-13 04:23 大姐姐小姐姐 阅读(1407) 评论(0) 推荐(0) 编辑
摘要: Checkbox 多选框 一组备选项中进行多选 ¶基础用法 单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。 禁用状态 多选框不可用状态。 多选框组 适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。 indeterminate 阅读全文
posted @ 2018-03-13 04:19 大姐姐小姐姐 阅读(15702) 评论(0) 推荐(0) 编辑
摘要: Radio 单选框 在一组备选项中进行单选 ¶基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是String、Number或Bool 阅读全文
posted @ 2018-03-09 07:18 大姐姐小姐姐 阅读(913) 评论(0) 推荐(0) 编辑
摘要: Button 按钮 常用的操作按钮。 ¶基础用法 基础的按钮用法。 使用type、plain和round属性来定义 Button 的样式。 <div> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el 阅读全文
posted @ 2018-03-09 07:14 大姐姐小姐姐 阅读(8733) 评论(0) 推荐(1) 编辑
摘要: Icon 图标 提供了一套常用的图标集合。 ¶使用方法 直接通过设置类名为 el-icon-iconName 来使用即可。例如: <i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"> 阅读全文
posted @ 2018-03-09 06:47 大姐姐小姐姐 阅读(21275) 评论(0) 推荐(1) 编辑
摘要: Typography 字体 我们对字体进行统一规范,力求在各个操作系统下都有最佳展示效果。 ¶中文字体 和畅惠风 PingFang SC PingFang SC 和畅惠风 Hiragino Sans GB Hiragino Sans GB 和畅惠风 Microsoft YaHei Microsoft 阅读全文
posted @ 2018-03-09 06:40 大姐姐小姐姐 阅读(1444) 评论(0) 推荐(0) 编辑
摘要: Element 为了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受。 ¶主色 Element 主要品牌颜色是鲜艳、友好的蓝色。 Blue #409EFF Blue #409EFF Blue #409EFF #409EFF ¶辅助色 除了主色外的场景色,需要在 阅读全文
posted @ 2018-03-09 06:35 大姐姐小姐姐 阅读(505) 评论(0) 推荐(0) 编辑
摘要: Container 布局容器 用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。 <el-header>:顶栏容器。 <el-aside>:侧 阅读全文
posted @ 2018-03-09 06:32 大姐姐小姐姐 阅读(18617) 评论(0) 推荐(1) 编辑
摘要: Layout 布局 通过基础的 24 分栏,迅速简便地创建布局。 ¶基础布局 使用单一分栏创建基础的栅格布局。 通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。 <el-row> <el-col :span="24"><div class="grid- 阅读全文
posted @ 2018-03-09 06:27 大姐姐小姐姐 阅读(9063) 评论(0) 推荐(0) 编辑
摘要: 内置过渡动画 Element 内应用在部分组件的过渡动画,你也可以直接使用。在使用之前请阅读 transition 组件文档 。 ¶fade 淡入淡出 Click Me .el-fade-in-linear .el-fade-in 提供 el-fade-in-linear 和 el-fade-in  阅读全文
posted @ 2018-03-09 06:20 大姐姐小姐姐 阅读(1965) 评论(0) 推荐(0) 编辑
摘要: 自定义主题 Element 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。我们提供了三种方法,可以进行不同程度的样式自定义。 ¶仅替换主题色 如果仅希望更换 Element 的主题色,推荐使用在线主题生成工具。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色, 阅读全文
posted @ 2018-03-09 06:17 大姐姐小姐姐 阅读(1208) 评论(0) 推荐(0) 编辑
摘要: 国际化 Element 组件内部默认使用中文,若希望使用其他语言,则需要进行多语言设置。以英文为例,在 main.js 中: 或 如果使用其它语言,默认情况下中文语言包依旧是被引入的,可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。 webp 阅读全文
posted @ 2018-03-09 06:16 大姐姐小姐姐 阅读(1313) 评论(0) 推荐(0) 编辑
摘要: 快速上手 本节将介绍如何在项目中使用 Element。 ¶使用 Starter Kit 我们提供了通用的项目模板,你可以直接使用。对于 Laravel 用户,我们也准备了相应的模板,同样可以直接下载使用。 如果不希望使用我们提供的模板,请继续阅读。 ¶引入 Element 你可以引入整个 Eleme 阅读全文
posted @ 2018-03-09 06:12 大姐姐小姐姐 阅读(490) 评论(0) 推荐(0) 编辑