Element_UI

Element_UI

1.Element UI 引言

官网: element.eleme.io/#/zh-CN

1.1 官方定义

网站快速成型工具 和 桌面端组件库

1.2 定义

element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。

1.3 由来

饿了么前端团队 基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件。

2.安装Element UI

2.1通过vue脚手架创建项目

vue init webpack element(项目名)

2.2在vue脚手架项目中安装element ui

//1.下载elementui的依赖
	npm i element-ui -S

// 2.指定当前项目中使用elementui
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';

//在vue脚手架中使用elementui
	Vue.use(ElementUI);

3.使用

我们可以打开官方文档

快速找到我们所需要的，十分方便！！

3.1 组件样式使用

我们先举例按钮吧

假如我们需要圆角按钮，我们就可以直接复制文档的代码段，进行我们所需要的修改

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

3.2.按钮组件的详细使用

总结:日后使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头
3.2.1创建按钮

<el-button>默认按钮</el-button>

3.2.2 按钮属性使用

<el-button type="primary" 属性名=属性值>默认按钮</el-button>
<el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>

总结:在elementui中所有组件的属性全部写在组件标签上
3.2.3 按钮组使用

<el-button-group>
  <el-button type="primary" icon="el-icon-back">上一页</el-button>
  <el-button type="primary" icon="el-icon-right">下一页</el-button>
</el-button-group>

注意:
在element ui中所有组件都是 el-组件名称 方式进行命名
在element ui中组件的属性使用都是直接将属性名=属性值方式写在对应的组件标签上

3.4.指令样式使用（非组件样式使用）

例如Loading加载（链接），其提供的是一个指令v-loading，而非一个组件，那么使用也很简单，因为已经注册了全局组件，直接调用就行了，举例：

<template>
  <div>
    <div v-loading="isLoading">这块内容使用v-loading指令，true时loading</div>
    <el-button @click=handle>{{clickText}}</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      clickText: "取消loading"
    }
  },
  methods:{
      handle(){
          this.isLoading = !this.isLoading
          if (this.isLoading) {
              this.clickText = "取消loading"
          } else {
              this.clickText = "继续loading"
          }
      }
  }
};
</script>

3.5事件样式使用

例如Message消息提示（链接），其提供是也不是组件，而是发送一个事件，那么使用时只需要参考文档发送的数据属性选项即可。