Combate de UI de elemento (basado en vue2.0)

Tutorial práctico de Element UI

1. Introducción a Element UI

Sitio web oficial: https://element.eleme.cn/#/zh-CN/component/installation

1.1, definición oficial

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

1.2. Definición

element ui es un marco de interfaz de usuario basado en vue, que ha desarrollado muchos componentes relacionados basados ​​en vue, lo cual es conveniente para nosotros para desarrollar páginas rápidamente

1.3, origen

Esta es una biblioteca de componentes de front-end de código abierto desarrollada por Vue por el equipo de front-end de la popular aplicación de pedidos, Ele.me. Todos los componentes encapsulados se proporcionan en ella.

2. Instalar la interfaz de usuario de Element

2.1. Crear un proyecto a través del andamio vue cli

这里我是使用vue2.0版本的，如果想使用vue3.0的小伙伴可以去官网上查找快速上手的指南

Construya andamios vue cli

vue int webpack (项目名)

2.2. Instalar dependencias elementui en el proyecto de andamios vue cli

官网提供npm安装&CDN在线库，这里我使用的是npm安装，因为现在很多企业开发都很少再去用CDN在线库，而且npm安装也能更好地和webpack打包工具配合使用（后面这句是官网原话）

npm install

# 1、下载element ui的依赖
	npm i element-ui -S
	学过maven的小伙伴可以理解为导入dependency

# 2、指定当前项目中使用element ui  （在我们已经搭建好的vue cli脚手架项目中main.js中引入）
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	
	//在vue脚手架中使用element ui
	Vue.use(ElementUI)

3. Componentes del botón

Uso de botones

# 默认样式按钮
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

Además, hay un simple botón liso , un botón redondo redondo , un icono de un botón

总结：日后使用element ui 相关的组件时需要注意的是所有的组件都是el-名称开头的，并且所有的组件属性都是写在组件标签上

Uso de las propiedades del botón

<el-button type="primary" round icon="el-icon-success">主要按钮</el-button>

4. Componente de conexión de texto de vínculo

4.1. Creación de componentes de conexión de texto

<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>

4.2. Atributos de los enlaces de texto

Casos de uso

<el-link type="primary" icon="el-icon-success">主要链接</el-link>

[Error en la transferencia de la imagen del enlace externo. Es posible que el sitio de origen tenga un mecanismo anti-sanguijuelas. Se recomienda guardar la imagen y subirla directamente (img-PrShtJX2-1607004687836) (Vue.assets / image-20201203133446839.png)]

5. El uso de componentes de diseño Layout (cuadrícula)

通过基础的24分栏，迅速便捷地创建布局

在element ui中布局组件将页面划分为多个行row，每行最多分为24栏（列）

5.1, use el componente Diseño

<el-row>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
</el-row>

注意

• En un componente de diseño hay una combinación de fila y columna.
• Al usar, distinga entre el atributo de fila y el atributo de col

5.2. Uso de atributos

• Uso de atributos de fila

  <el-row gutter="20" tag="span">
    <el-col :span="4"><div style="border: 1px red solid;">占用4份</div></el-col>
    <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
    <el-col :span="3"><div style="border: 1px red solid;">占用3份</div></el-col>
    <el-col :span="9"><div style="border: 1px red solid;">占用9份</div></el-col>
  </el-row>
  

• Uso de atributos de columna

  layout组件中使用偏移

  注意：offset中的数字是24份所占的份数

  offset 会有浮动的现象当所在行数超过24的时候会吧下一列挤到下一行

  push 会入侵下一列

  <h1>layout组件中使用偏移</h1>
  <el-row>
    <el-col :span="6" :offset="3"><div style="border: 1px blue solid">layout组件中使用偏移</div></el-col>
  </el-row>
  

6, contenedor de diseño de contenedores

快速的帮我们在页面上完成一个的布局，然后在对应布局的地方写上我们的组件

6.1, crea un contenedor de diseño

<el-container>
    
</el-container>

6.2, crea un contenedor de diseño

Componentes del contenedor utilizados para el diseño para facilitar la construcción rápida de la estructura básica de la página:

<el-container>: Envase exterior. Cuando el subelemento contiene <el-header>o <el-footer>cuando todos los subelementos de verticalmente dispuestos verticalmente, o izquierda y derecha están dispuestos horizontalmente.

<el-header>: Contenedor de barra superior.

<el-aside>: Contenedor de barra lateral.

<el-main>: El contenedor del área principal.

<el-footer>: Contenedor de columna inferior.

Los componentes anteriores usan un diseño flexible, asegúrese de que el navegador de destino sea compatible antes de usarlo. Además, <el-container>el elemento hijo solo puede ser los últimos cuatro, y el elemento padre de los últimos cuatro solo puede serlo <el-container>.

6.3. Uso anidado de contenedores

<!--创建容器-->
<el-container>
  <!--header-->
  <el-header>
    <div><h1>我是标题</h1></div>
  </el-header>

  <!--这里使用了容器的嵌套，container默认为一行-->
  <el-container>
    <!--asider-->
    <el-aside>
      <div style="border: 1px plum solid"><h1>我是菜单</h1></div>
    </el-aside>
    <!--main-->
    <el-main>
      <div><h1>我是中心内容</h1></div>
    </el-main>
  </el-container>
  <!--footer-->
  <el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>

6.4, las propiedades del componente contenedor