基于 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)
的码云指数为
超过 的项目
加载中

评论(32)

D
DongLIanJ
希望能做的更好
淡定的米哥
淡定的米哥
mark
supperman
supperman
欢迎使用elmentui增删改查功能自动生成工具, 可一键生成增删改查table相关的页面代码, #MoliCode#
淡定的米哥
淡定的米哥
mark,不错~
花间一壶酒___
bug太多,反馈无响应,已弃
浮生若梦E
浮生若梦E
出一些综合示例 demo吧
杨军军
杨军军
#吐槽##Element# form 验证规则 rules 的文档说明只是一个 Object, 这也太省了吧,翻了代码才看到 trigger 还可以传 change
杨军军
杨军军
#吐槽##Element# form 的验证必须是 form有model, form-item 是这个 form 的属性,这就没法验证 vuex 上的属性了呀
杨军军
杨军军
#吐槽##Element# <el-radio> 用 label 标识值,而且无法设置只显示radio 选择框
杨军军
杨军军
整体不错,小毛病不少

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

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

2019/11/28 07:26

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

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

2019/07/27 08:05

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

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

2019/06/01 07:08

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

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

2019/05/31 07:01

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

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

2019/04/26 07:13

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

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

2019/04/04 06:41

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

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

2019/03/29 06:52

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

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

2019/03/23 06:47

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

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

2019/03/05 07:03

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

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

2019/03/02 07:53

没有更多内容

加载失败,请刷新页面

1
回答
vue el-row实现拖拽排序

Element的 <el-row v-for="(item,itemIndex) in list.data"> 标签实现的列表能不能拖拽排序,求大佬代码,谢谢

01/19 18:28
1
回答
4
回答
vue-element 登录页跳转到首页,怎么实现
安然_oschina 的回答 2019/12/13 21:14
最佳答案
按图走就行了
1
回答
elementUI中tree怎么取消父关联子,但是不取消子关联父呢

element中tree的属性有check-strictly是取消父子互不关联,但是目前的功能是需要子关联父,但是父不关联子,请问这个能改成我需要的效果吗...

2019/10/30 15:51
3
回答
element-ui库多选组件
cmsNB 的回答 2019/06/20 16:21
最佳答案
此问题已解决! 问题出现在:声明得变量有问题! 注意的点: 第一,select多选属性multiple,需要组件绑定值的类型为数组! 第二:我的组件写在弹出层上,关闭弹出层时,清空select绑定的值,不要大意的直接赋值为空串!应该赋值为空数组[]!
2
回答
element ui如何国际化?

我是使用js引入的方式写的.html页面。 html页面代码: ``` <!DOCTYPE html> <html> <head> <meta chars...

2019/05/25 09:25
4
回答
Vue使用Axios通过post方式访问后台,为什么后台获取不到传递过来的参数?(跨域)

我用Vue+Element搭建了一个前端应用。使用Axios来进行数据的访问。配置如下 后台是一个Spring项目,也进行了跨域的配置,如下 使用如下代码...

2019/05/13 13:53
1
回答
element的el-input怎么绑定一个未定义的属性?

html如下,vue的data赋值toolbarQueryParam={},但里面的属性,例如被绑定的toolbarQueryParam.loginNam...

2019/03/13 16:11
1
回答
关于vue element 加载的问题
ivanqiu1 的回答 2018/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
1.1W
0
element UI的使用

1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart 2.安装 cnpm i element-ui -S -S表示 --save 3.引入element UI的css 和 插件 import ElementUI from 'element-ui'; import...

2019/11/14 12:45
54
0
The jQuery UI CSS Framework(中文说明)

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

2012/05/07 22:10
223
0
Electron-Vue使用el-table不显示

参考地址Use element-ui in electron-vue template have strange problems 把element-ui加入到.electron-vue/webpack.renderer.config.js文件中的白名单里面 在这句话let whiteListedModule...

2019/11/23 19:39
95
0
(2)集成element-ui

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

2018/10/18 08:41
115
0
Element UI 入门

1.什么是Element UI: Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库. 2.搭建环境: 步骤一: 通过 vue-cli创建项目 vue create 项目名 步骤二: 手动选择功能(Ma...

2019/11/06 19:47
495
2
Vue Element UI上手记

安装node、cnpm(自行百度) 安装cli3 cnpm install -g @vue/cli 创建新的vue项目 vue create my-project 在项目跟目录引入element uicnpm i element-ui -S 修改main.js import Vue from 'vu...

2019/04/29 16:22
276
0
设计

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

2018/08/20 17:39
118
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部