基于 Vue 2.0 的组件库 Element

基于 Vue 2.0 的组件库 Element

MIT
JavaScript 查看源码»
跨平台
2016-09-05
局长

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。

特性:

一致性 Consistency

  • 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;

  • 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

反馈 Feedback

  • 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;

  • 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

  • 简化流程:设计简洁直观的操作流程;

  • 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;

  • 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

可控 Controllability

  • 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;

  • 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

运行效果:

安装:

npm install element-ui@next

示例代码:

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css';
Vue.use(Element)
// or
import Select from 'element-ui/lib/select';
import Select from 'element-ui/lib/theme-default/select.css';
import Button from 'element-ui/lib/button';
import Button from 'element-ui/lib/theme-default/button.css';
Vue.component(Select.name, ElSelect)
Vue.component(Button.name, ElButton)
加载中

评论(27)

浮生若梦E
浮生若梦E
出一些综合示例 demo吧
杨军军
杨军军
#吐槽##Element# form 验证规则 rules 的文档说明只是一个 Object, 这也太省了吧,翻了代码才看到 trigger 还可以传 change
杨军军
杨军军
#吐槽##Element# form 的验证必须是 form有model, form-item 是这个 form 的属性,这就没法验证 vuex 上的属性了呀
杨军军
杨军军
#吐槽##Element# <el-radio> 用 label 标识值,而且无法设置只显示radio 选择框
杨军军
杨军军
整体不错,小毛病不少
诺诺
诺诺
很好用的
tubexu
tubexu
很有个性
也许还十年
请问折叠导航栏中,展开和收缩按钮怎么合并为一个按钮
xaoyaoyaomm
xaoyaoyaomm
饿了吗
六亿科技
不错,一直在使用,继续加油吧。

Element 2.4.10 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.10 发布了,Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 更新内容 ...

11/17 07:44

Element 2.4.9 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.9 发布了,Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 更新内容如下...

10/27 07:18

Element 2.4.8 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.8 发布了,Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 更新内容如下...

10/01 07:40

Element 2.4.7 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.7 发布了,Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 更新内容如下...

09/16 07:56

Element 2.4.6 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.6 已发布,Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 更新内容如下...

08/11 07:46

Element 2.4.5 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.5 发布了,Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 更新内容如下...

07/27 06:28

Element 2.4.4 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.4 已发布,更新内容如下: 修复重置表单后触发 Select 组件校验问题,#11837 修复 Input 组件 suffix 与 append 共存时样式错乱问题,#11951 修复可清空的只读 Input 仍会显示清...

07/14 07:38

Element 2.4.3 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.3 已发布,更新内容如下: 修复当自定义 Tree 节点高度时,allow-drop 不能正常工作的问题,#11797 现在 Form 的 clearValidate 方法支持传入参数,指定需要清空校验结果的 Form...

07/04 07:21

Element 2.4.2 发布,代码改变 Select 值触发表单校验

Element 2.4.2 发布了,Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 此次更新内容...

06/27 07:43

Element 2.4.1 发布,基于 Vue 2.0 的桌面端组件库

Element 2.4.1 已发布,更新内容如下: 移除 Autocomplete 的重复类型声明,#11388 修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题,#11427 修复 Select 的初始值为 nu...

06/09 07:27

没有更多内容

加载失败,请刷新页面

1
回答
关于vue element 加载的问题
ivanqiu1 的回答 07/19 12:06
最佳答案
因为不知道你页面的加载逻辑,给不了正确的答案。 可以尝试以下:通过chrome的network,看下是不是加载css请求的顺序和加载jsp的顺序以及耗时。 正常情况下:css在前、html元素在中、javascript逻辑 在最后 即可解决
2
回答
如何修改elementUI Popover 弹出框的样式

如何修改elementUI Popover 弹出框的样式,比如在当前组件中 修改背景颜色以及箭头的颜色,找到了.el-popover这个样式,但是修改后无...

2017/05/18 19:29

没有更多内容

加载失败,请刷新页面

没有更多内容

jQuery UI的CSS框架

jQuery UI的CSS框架设计得非常鲁棒方便用于定制用户界面控件。框架包括很多适合多数用户界面需要的CSS类,这些类能用jQuery UI ThemeRoller来所见即所得地修改。如果你的控件也采用本框架,你...

2011/02/01 13:58
5.5K
0
The jQuery UI CSS Framework(中文说明)

在项目中经常会用到一些样式什么的,如果使用了jQuery UI那么很多的图标,样式什么的,就可以尽量使用jQuery UI里面已经定义好了的,在此就对jQuery UI中的css做写了下注释,提供自己准备利用...

2012/05/07 22:10
216
0
(2)集成element-ui

(2)集成element-ui 1 安装element-ui依赖 cnpm install --save element-ui 2 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 ...

10/18 08:41
15
0
设计

不会设计没关系!看看这七个实用的网页UI设计小技巧! element-ui awesome-element find 覆盖element ui样式 element-ui 官方文档页面 换肤方式 ant design ant-design-vue vue-antd-admin v...

08/20 17:39
52
0
动态控制C4C UI元素的显示和隐藏

C4C UI上UI元素的显示和隐藏可以通过Key User在Adaptation模式里通过编辑一些简单的rule去控制,诸如这种格式: ```ruby if ( logic expression = true ) then display the UI element else h...

04/07 21:56
7
0
D2 Crud,一款简单易用的表格组件

D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置...

09/05 09:47
5
0
UI框架

一:angular开发UI 1. ui可以用饿了么开发的 https://ng.ant.design/docs/i18n/zh 二:AUI框架 1.h5开发UI http://www.auicss.com/doc/v/2 2.APICloud APP开发文档 https://docs.apicloud.co...

06/21 17:20
20
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部