Element 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Element 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: 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)
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

Element 的相关博客

Element UI

Element UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 基本使用示例代码: <!DOCTYPE html...

Element UI

Element UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 基本使用示例代码: <!DOCTYPE html...

element-ui

#input输入框 表单验证-数值型相关注意事项 input默认输入值为字符串,rules中type: 'number'的验证无效,即使设置input的typ...

element -ui 入门

1.什么是Element UI: Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库. 2.搭建环境: 步骤一: 通过...

安装element-ui

element地址:https://element.eleme.cn/2.0/#/zh-CN/component/quickstart 1.在新建终端 【安装element-ui组件依赖】 cnpm i...

element UI的使用

1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart 2.安装 cnpm i element-ui -S -S表示 --save 3.引入element...

Element-ui-安装

1、node环境安装 1.1、根据自己电脑位数,下载最新版node.js并安装https://nodejs.org/en/ 1.2、下载git并安装https://gitfo...

引入element-ui

按需要引入: 1、安装: cnpm install element-ui --save cnpm install babel-plugin-component –-save-dev cnpm install ba...

element-ui学习

1. 行:el-row 列:el-col 例: <el-row> <el-col :span="20"><div class="grid-content bg-purple-dark"></div></el-col> <...

element - ui tree

一行代码两行泪,没有外网真可怕!好久没写博客了,更新一把。 1 <template> 2 <div> 3 <el-tree :data="data" :pro...

评论 (39)

加载中
分享一下基于ElementUI的应用级库 文档地址 115.159.65.195:8080/vefdoc
06/28 17:24
回复
举报
支持一下,不过form表单那个复杂表单,好像有点问题,希望早日修复普及!
09/15 13:35
回复
举报
支持一下,有些小毛病希望早日修复
04/20 11:10
回复
举报
希望能做的更好
2019/12/01 09:06
回复
举报
mark
2019/11/22 14:55
回复
举报
欢迎使用elmentui增删改查功能自动生成工具, 可一键生成增删改查table相关的页面代码, #MoliCode#
2019/08/02 15:02
回复
举报
mark,不错~
2019/07/29 11:39
回复
举报
bug太多,反馈无响应,已弃
2019/03/23 18:37
回复
举报
打分: 推荐
出一些综合示例 demo吧
2018/02/01 10:55
回复
举报
#吐槽##Element# form 验证规则 rules 的文档说明只是一个 Object, 这也太省了吧,翻了代码才看到 trigger 还可以传 change
2017/12/05 10:17
回复
举报
#吐槽##Element# form 的验证必须是 form有model, form-item 是这个 form 的属性,这就没法验证 vuex 上的属性了呀
2017/12/05 10:14
回复
举报
更多评论
39 评论
1.1K 收藏
分享
返回顶部
顶部