elementui官网文档（Vue如何使用element-ui实现以下功能）

本文目录

• Vue如何使用element-ui实现以下功能
• 怎么学习Element-ui的源码
• 如何在element UI lt;el-table>表头中添加 select选择器或其他组件
• 怎么改变element-ui 文字提示tooltip的背景颜色
• elementui 获取下拉框中文名字
• element-ui适合移动端用么
• vue的ui框架有哪些

Vue如何使用element-ui实现以下功能

Vue 使用element-ui 

项目中引入elementui 参考 其官网

安装：npm i element-ui -S

引入项目 ： 在main.js 中加入

import ElementUI from ’element-ui’;

import ’element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

登录模块：

使用element form 组件编写页面：

在登录成功的方法中使用 messagebox组件弹出 登录成功 提示

怎么学习Element-ui的源码

平常一直在用element的组件. 去github上看下了,就是想系统的学习一下写这种ui组件库是怎样的一个过程.(平常一直在使用es6和vue2.0)

1. 先看老版本。两个好处：一是老版本功能少点，便于学习。二是在你觉得看的差不多的时候，可以看看新版本增加了哪些功能，然后自己来实现。

2. 2.先看js，把所有的js看完，再看css。

3. 3.从简单的组件开始看。在看简单的组件之前应该会有自己对这个组件的理解，比如从button开始看，会觉得button不就是emit一下click事件吗，然后你再看他是怎么做的，除了你看之前就猜到的emit click事件以外还做了些什么。总之就是带着一点点思考看。

4. 4.故意找茬。比如发现inputnumber这个组件用了input组件，而且还支持prepend和append的slot，那么你看看加上append之后会显示成什么样子。

5. 5.记录下你在源码里读到的，并且官方文档里面没有提及的功能。

如何在element UI lt;el-table>表头中添加 select选择器或其他组件

《el-table-column type=“selection“ width=“55“》，《/el-table-column》。

1. select是一个计算机函数，位于头文件#include 《sys/select.h》 。该函数用于监视的文件描述符的变化情况——读写或是异常。

2. 原型：int select (int maxfd + 1,fd_set *readset,fd_set *writeset,fd_set *exceptset,const，struct timeval * timeout)。

怎么改变element-ui 文字提示tooltip的背景颜色

添加Class类

《el-tooltip :popper-class=“toolTipClass“ class=“item“ effect=“dark“ content=“Top Center 提示文字“ placement=“top“》
      《el-button》上边《/el-button》
《/el-tooltip》
《script lang=“es6“》
    export default {
        data: function () {
            return {
                toolTipClass: ’page-login-toolTipClass’
            }
        }
    }
《/script》
《style lang=“sass“》
    .page-login-toolTipClass
        background-color: #2992FF !important
《/style》

文档地址：http://element.eleme.io/#/zh-CN/component/tooltip

elementui 获取下拉框中文名字

具体如下：
el-select 添加value-key=‘id’，value-key作为 value 唯一标识的键名，绑定值为对象类型时必填el-option :value赋值为item。
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型。

element-ui适合移动端用么

minit－ui和element－ui，前者是移动端，后者是PC端，结合Vue功能不错，就是UI组件不是很强大，可以满足一般的需求。

所以element－ui不适合移动端。

element－ui的需求：丰富的feature：丰富的组件，自定义主题，国际化。文档 & demo：提供友好的文档和 demo，维护成本小，支持多语言。安装 & 引入：支持 npm 方式和 cdn 方式，并支持按需引入。工程化：开发，测试，构建，部署，持续集成。

作为一个基础组件库，还有一个很重要的方面就是组件种类丰富。element－ui官方目前有55个组件，分成了6大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好地满足大部分PC端toB业务开发需求。

element－ui的组件源码在packages目录里维护，而并不在src目录中，这么做的目的猜测是为了让每个组件可以单独打包，支持按需引入。

但实际上想达到这个目的也并不一定需要这么去组织维护代码，更推荐把组件库中的组件代码放在src／components目录中维护，然后通过修改webpack配置脚本也可以做到每个组件单独打包以及支持按需引入，源码放在src目录总是更合理的。

扩展资料：

element－ui组件的样式、公共样式都在packages／theme－chalk文件中，并且它是可以独立发布的。element－ui组件样式中的颜色、字体、线条等等样式都是通过变量的方式引入的。

在packages／theme－chalk／src／common／var．scss中我们可以看到这些变量的定义，这样就给做多主题提供了方便，因为我只要修改这些变量，就可以实现组件的主题改变。

updateVarible是一个POST请求，他会把你修改的的主题配置提交到后端server，提交的数据你可以自己去查看它的RequestPayload，这个POST请求会返回一段CSS文本，然后会动态插入到head标签的底部，来覆盖默认样式。

可以通过审查元素看到head底部会动态插入一个id为chalk－style的标签。

参考资料：百度百科-UI设计

vue的ui框架有哪些

1. elementUI

2.iview

这个UI框架是对标elementUI而生的，最大优点是官方有桌面版配置工具，只需使用鼠标就可以构建一个基于iview+vue的应用，免去手巧命令的烦恼。最新的版本为3.x。建议对elementUI框架审美疲劳的同学可以尝试这个呦。官方网站的文档和例子基本上你是小白也能学明白。

3.zanUI

由有赞团队开源的移动端UI框架，对于移动电商应用的开发来说，有很多写好的页面组件，可以直接拿来使用。当然zanUI的样式也是很好看的。当然也有PC端组件，和小程序端。zanUI一共分三个版本，针对移动端的为vantUI，PC端为zentUI，小程序端为Vant Weapp。

4.onsenUI

onsenUI的组件样式

这个UI框架是国外开发，所以UI设计，很多都是迎合国外用户，对于国内用户，可能不是很好看，但是做为主打海外市场的应用，这个UI框架还是值得去使用的。

5.mintUI

这个是一个中规中矩的移动端UI框架，适合移动端的绝大部分场景。

6.museUI

这个框架还是比较有特色的，不管怎么说，这类不随波逐流的UI框架已经很少见了，但是还是建议使用在主打海外市场的应用上。