认识 Element

Data: 2016-09-23 23:56:40Form: JournalClick: 12

# 认识 `Element`

# 一、介绍

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。
由饿了么团队出品，提供了配套 axure、sektch 设计资源，可以直接下载使用，能帮我等搬砖人员节省大量的时间。
使用现成的 UI 组件库，能快速搭建项目，后期也容易维护，在敏捷开发项目中尤为常见。设计师可以下载设计文件，在做设计图时直接使用模板，既能快速出图，也保证了前端还原实现。
官网：https://element-plus.org/zh-CN/open in new window

# 二、安装

# 1、npm安装
npm install element-plus --save

# 2、yarn安装
yarn add element-plus

# 三、引入Element Plus

// 1、main.js 文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

// 在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 
// size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。
app.use(store).use(router).use(ElementPlus, { size: "small", zIndex: 3000 }).mount("#app");

# 四、`Basic` 基础组件

# 1、`Button` 按钮

<el-button></el-button>

参数	说明	类型	可选值	默认值
size	尺寸	string	large、middle、small	-
type	类型	string	primary、success、warning、danger、info、text	-
plain	是否为朴素按钮	boolean	-	false
text	是否为文字按钮	boolean	-	false
bg	是否显示文字按钮背景颜色	boolean	-	false
link	是否为链接按钮	boolean	-	false
round	是否为圆角按钮	boolean	-	false
circle	是否为圆形按钮	boolean	-	false
loading	是否为加载中状态	boolean	-	false
disabled	按钮是否为禁用状态	boolean	-	false

<template>
    <div>
        <!-- 1、size 按钮尺寸 -->
        <el-button>默认</el-button>
        <el-button size="large">大</el-button>
        <el-button size="middle">中</el-button>
        <el-button size="small">小</el-button>

        <!-- 2、type 按钮类型 -->
        <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-button type="text">文本</el-button>

        <!-- 3、plain 朴素按钮、text 文字按钮、bg 显示文字按钮背景颜色、link 链接按钮、round 圆角按钮、circle 圆形按钮、loading 加载中状态 -->
        <el-button type="success">成功</el-button>
        <el-button type="success" plain>朴素按钮</el-button>
        <el-button type="success" text>文字按钮</el-button>
        <el-button type="success" bg>显示文字按钮背景颜色</el-button>
        <el-button type="success" text bg>组合使用</el-button>
        <el-button type="success" link>链接按钮</el-button>
        <el-button type="success" round>圆角按钮</el-button>
        <el-button type="success" circle>圆形按钮</el-button>
        <el-button type="success" loading>加载中状态</el-button>
        <el-button type="success" disabled>禁用状态</el-button>
    </div>
</template>

# 2、`Button` 按钮组

<el-button-group></el-button-group>

参数	说明	类型	可选值	默认值
size	用于控制该按钮组内按钮的大小	string	large、middle、small	-
type	用于控制该按钮组内按钮的类型	string	primary、success、warning、danger、info、text	-

<template>
    <div>
        <!-- 1、按钮组 -->
        <el-button-group>
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
        
        <!-- 2、size 按钮尺寸 -->
        <el-button-group size="large">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
        <el-button-group size="middle">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
        <el-button-group size="small">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>

        <!-- 3、type 按钮类型 -->
        <el-button-group type="primary">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
        <el-button-group type="success">
            <el-button>添加</el-button>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
        </el-button-group>
    </div>
</template>

# 3、`Icon` 图标

<el-icon></el-icon>

参数	描述	类型	可选值	默认值
color	颜色	Pick `<CSSProperties, 'color'>`	-	inherit
size	大小	number	string	-

# 1、安装 Icon 图标
# 1.1、npm 命令
npm install @element-plus/icons-vue
# 1.2、yarn 命令
yarn add @element-plus/icons-vue

# 2、main.js 文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
# 2.1、需要引入图标文件，并循环处理
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(store).use(router).use(ElementPlus).mount('#app')

# 3、图标
<template>
    <div>
        # 3.1、默认图标
        # 3.2、color 图标添加颜色
        # 3.3、size 图标设置大小
        <el-icon><AddLocation /></el-icon>
        <el-icon color="red"><AddLocation /></el-icon>
        <el-icon size="48px"><AddLocation /></el-icon>

        # 3.4、按钮添加图标
        <el-button-group type="success">
            <el-button><el-icon><AddLocation /></el-icon>添加</el-button>
            <el-button><el-icon><Edit /></el-icon>修改</el-button>
            <el-button><el-icon><DeleteFilled /></el-icon>删除</el-button>
        </el-button-group>
    </div>
</template>

# 4、布局

<el-row></el-row> 行

参数	描述	类型	可选值	默认值
gutter	栅格间隔	number	-	0
justify	flex 布局下的水平排列方式	string	start、end、center、space-around、space-between、space-evenly	start
align	flex 布局下的垂直排列方式	string	top、middle、bottom	top
tag	自定义元素标签	string	-	div

<el-col></el-col> 列表

参数	描述	类型	可选值	默认值
xs	`< 768px` 响应式栅格数或者栅格属性对象	number/object (例如 {span: 4, offset: 4})	-	-
sm	`≥ 768px` 响应式栅格数或者栅格属性对象	number/object (例如 {span: 4, offset: 4})	-	-
md	`≥ 992px` 响应式栅格数或者栅格属性对象	number/object (例如 {span: 4, offset: 4})	-	-
lg	`≥ 1200px` 响应式栅格数或者栅格属性对象	number/object (例如 {span: 4, offset: 4})	-	-
xl	`≥ 1920px` 响应式栅格数或者栅格属性对象	number/object (例如 {span: 4, offset: 4})	-	-
span	栅格占据的列数	number	-	24
offset	栅格左侧的间隔格数	number	-	0
push	栅格向右移动格数	number	-	0
pull	栅格向左移动格数	number	-	0
tag	自定义元素标签	string	*	div

<template>
    <div>
        <!-- 1、xs 手机屏幕，一行有24列 -->
        <!-- 看不清可以增加背景色style="background-color:red;" -->
        <el-row>
            <el-col :xs="6">欧阳克</el-col>
            <el-col :xs="6">朱天蓬</el-col>
            <el-col :xs="6">灭绝师太</el-col>
            <el-col :xs="6">西门大官人</el-col>
        </el-row>
        <!-- 2、超出24列，就会换行 -->
        <el-row>
            <el-col :xs="8">欧阳克</el-col>
            <el-col :xs="8">朱天蓬</el-col>
            <el-col :xs="8">灭绝师太</el-col>
            <el-col :xs="8">西门大官人</el-col>
        </el-row>
        <!-- 3、xl 在超大屏幕下 -->
        <el-row>
            <el-col :xl="8">欧阳克</el-col>
            <el-col :xl="8">朱天蓬</el-col>
            <el-col :xl="8">灭绝师太</el-col>
            <el-col :xl="8">西门大官人</el-col>
        </el-row>
        <!-- 4、混搭使用 -->
        <el-row>
            <el-col :xl="8" :xs="6">欧阳克</el-col>
            <el-col :xl="8" :xs="6">朱天蓬</el-col>
            <el-col :xl="8" :xs="6">灭绝师太</el-col>
            <el-col :xl="8" :xs="6">西门大官人</el-col>
        </el-row>
        <!-- 5、栅格间隔，内边距 -->
        <el-row gutter="100">
            <el-col :xl="8" :xs="6">欧阳克</el-col>
            <el-col :xl="8" :xs="6">朱天蓬</el-col>
            <el-col :xl="8" :xs="6">灭绝师太</el-col>
            <el-col :xl="8" :xs="6">西门大官人</el-col>
        </el-row>
        <!-- 6、offset 栅格左侧的间隔格数 -->
        <el-row>
            <el-col :xl="8" :xs="6" :offset="6">欧阳克</el-col>
            <el-col :xl="8" :xs="6">朱天蓬</el-col>
            <el-col :xl="8" :xs="6">灭绝师太</el-col>
            <el-col :xl="8" :xs="6">西门大官人</el-col>
        </el-row>
        <!-- 7、push 栅格向右移动格数 -->
        <el-row>
            <el-col :xl="8" :xs


      
      
  
    
      
        
        I'm Developers.
      
      Copyright © 2014-2024 Guojunjie.com.

All screenshots © 郭俊杰(Journal).

I have been in Xiamen,China.

Website Establishment by Journal.
闽ICP备12018326号-2 
      
     
    
      
        	关于 
            博客 
            留言 
            联系 
                    
          地图 Map
      
    
          
        
        
        
        
          
            Name:
              
            
              
              
              
              
            
            
            
            
            
          
            
            <提交>
        
        
          
            请输入验证码再继续！
            
              
                验证码：
                
                
              
                
            
          
        
      
  
  
  
    Copyright © 2016 by 郭俊杰(Journal)
  
  
     


  返回顶部
  
  
    返回

我是 PHP 程序员

认识 Element

# 认识 Element

# 一、介绍

# 二、安装

# 三、引入Element Plus

# 四、Basic 基础组件

# 1、Button 按钮

# 2、Button 按钮组

# 3、Icon 图标

# 4、布局

# 认识 `Element`

# 四、`Basic` 基础组件

# 1、`Button` 按钮

# 2、`Button` 按钮组

# 3、`Icon` 图标