element-plus 的使用

关于

网站快速成型工具 Element :基于 Vue 2.x 的 Element UI
Element Plus :基于 Vue 3,面向设计师和开发者的组件库

由于 Vue 3 不再支持 IE11,Element Plus 也不再支持 IE 浏览器。

一、安装

安装 element-plus 插件。

可以使用以下命令进行安装:

# NPM
$ vue add element-plus

vue add element-plus    

📦  Installing vue-cli-plugin-element-plus...


added 1 package, and audited 1052 packages in 16s

158 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: vue-cli-plugin-element-plus

? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? No
? Choose the locale you want to load, the default locale is English (en) zh-cn

🚀  Invoking generator for vue-cli-plugin-element-plus...
📦  Installing additional dependencies...


added 8 packages, and audited 1060 packages in 56s

159 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Icon 图标

Element Plus 提供了一套常用的图标集合。

# NPM
$ npm install @element-plus/icons-vue

npm install @element-plus/icons-vue --legacy-peer-deps

added 1 package, and audited 1061 packages in 6s

159 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

vueuse/core

这个里面封装了很多hook工具函数

npm i @vueuse/core

added 6 packages, changed 4 packages, and audited 1072 packages in 12s

174 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

安装后 package.json 如下

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@vueuse/core": "^10.2.1",
    "core-js": "^3.31.1",
    "element-plus": "^2.3.8", 
    "vue": "^3.3.4",
    "vue-i18n": "^9.3.0-beta.24",
    "vue-router": "^4.2.4",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.9",
    "@babel/eslint-parser": "^7.22.9",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-vuex": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-standard": "^8.0.1",
    "eslint": "^8.45.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.15.1",
    "sass": "^1.64.1",
    "sass-loader": "^13.3.2",
    "vue-cli-plugin-element-plus": "~0.0.13"
  }

二、使用

在 main.js 中将 element-plus 注入 vue 中

import installElementPlus from './plugins/element'

installElementPlus(app)

/plugins/element.js

import ElementPlus from 'element-plus'

// Light 模式
import 'element-plus/dist/index.css'
// Dark 模式
import 'element-plus/theme-chalk/dark/css-vars.css'

//国际化
// import locale from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/dist/locale/zh-cn.js'

//注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

//注册所有图标
export default (app) => {
  app.use(ElementPlus, { locale })//全局配置国际化

  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
}

暗黑模式

<el-button @click="switchThemes()">{{ showMode }}</el-button>
<script>

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()

export default {
    name: 'TestView',
    data() {
        return {
            showMode: 'Dark Mode'
        };
    },
    methods: {
        switchThemes() {
            const toggleDark = useToggle(isDark)//模式切换
            // console.log(toggleDark())

            this.showCurrentMode(toggleDark())

        }, showCurrentMode(dark) {

            this.showMode = dark === true ? 'Light Mode' : 'Dark Mode'

        }
    }
}

</script>

基础组件

Button 按钮

常用的操作按钮。

el-button 按钮

使用 type、plain、round 和 circle 等来定义按钮的样式。

  • type: 类型,改变颜色,可选值 ‘primary’| ‘success’| ‘warning’| ‘danger’| ‘info’| ‘text’(delete)
  • plain、round、circle: 朴素、圆角、圆形,改变形状,boolean 默认false
  • icon: 图标组件,string/Component
  • disabled: 定义按钮是否被禁用,boolean 默认false
  • link: 链接按钮,boolean 默认false
  • text: 文字按钮,没有边框和背景色的按钮,boolean 默认false
  • bg: 显示文字按钮背景颜色,boolean 默认false
  • size: 尺寸,可选值 ‘large’| ‘default’| ‘small’
  • loading: 加载中状态(自动旋转),boolean 默认false
  • loading-icon: 自定义加载中状态图标组件,string/Component 默认Loading
  • autofocus: 原生 autofocus 属性,boolean 默认false
  • native-type: 原生 type 属性,‘button’| ‘submit’| ‘reset’
  • color: 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色,string
  • dark: dark 模式, 意味着自动设置 color 为 dark 模式的颜色,boolean 默认false
  • tag: 自定义元素标签,string/Component 默认button

Exposes

  • ref 按钮 html 元素,object Ref
  • size 按钮尺寸,object ComputedRef<‘’ | ‘small’ | ‘default’ | ‘large’>
  • type 按钮类型,object ComputedRef<‘’ | ‘default’ | ‘primary’ | ‘success’ | ‘warning’ | ‘info’ | ‘danger’ | ‘text’>
  • disabled 按钮已禁用,object ComputedRef
  • shouldAddSpace 是否在两个字符之间插入空格,object ComputedRef

el-button-group 按钮组
size 用于控制该按钮组内按钮的大小,可选值 ‘large’| ‘default’| ‘small’
type 用于控制该按钮组内按钮的类型,可选值 ‘primary’| ‘success’| ‘warning’| ‘danger’| ‘info’

 	<el-row class="mb-4">
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button plain>Plain</el-button>
        <el-button type="primary" plain>Primary</el-button>
        <el-button type="success" plain>Success</el-button>
        <el-button type="info" plain>Info</el-button>
        <el-button type="warning" plain>Warning</el-button>
        <el-button type="danger" plain>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button round>Round</el-button>
        <el-button type="primary" round>Primary</el-button>
        <el-button type="success" round>Success</el-button>
        <el-button type="info" round>Info</el-button>
        <el-button type="warning" round>Warning</el-button>
        <el-button type="danger" round>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button icon="Search" circle />
        <el-button type="primary" icon="Edit" circle />
        <el-button type="success" icon="Check" circle />
        <el-button type="info" icon="Message" circle />
        <el-button type="warning" icon="Star" circle />
        <el-button type="danger" icon="Delete" circle />
    </el-row>

    <el-row class="mb-4">
        <el-button disabled>Default</el-button>
        <el-button type="primary" disabled>Primary</el-button>
        <el-button type="success" disabled>Success</el-button>
        <el-button type="info" disabled>Info</el-button>
        <el-button type="warning" disabled>Warning</el-button>
        <el-button type="danger" disabled>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button plain disabled>Plain</el-button>
        <el-button type="primary" plain disabled>Primary</el-button>
        <el-button type="success" plain disabled>Success</el-button>
        <el-button type="info" plain disabled>Info</el-button>
        <el-button type="warning" plain disabled>Warning</el-button>
        <el-button type="danger" plain disabled>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button link>Plain</el-button>
        <el-button type="primary" link>Primary</el-button>
        <el-button type="success" link>Success</el-button>
        <el-button type="info" link>Info</el-button>
        <el-button type="warning" link>Warning</el-button>
        <el-button type="danger" link>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button link disabled>Plain</el-button>
        <el-button type="primary" link disabled>Primary</el-button>
        <el-button type="success" link disabled>Success</el-button>
        <el-button type="info" link disabled>Info</el-button>
        <el-button type="warning" link disabled>Warning</el-button>
        <el-button type="danger" link disabled>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button text>Plain</el-button>
        <el-button type="primary" text>Primary</el-button>
        <el-button type="success" text>Success</el-button>
        <el-button type="info" text>Info</el-button>
        <el-button type="warning" text>Warning</el-button>
        <el-button type="danger" text>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button text bg>Plain</el-button>
        <el-button type="primary" text bg>Primary</el-button>
        <el-button type="success" text bg>Success</el-button>
        <el-button type="info" text bg>Info</el-button>
        <el-button type="warning" text bg>Warning</el-button>
        <el-button type="danger" text bg>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button text disabled>Plain</el-button>
        <el-button type="primary" text disabled>Primary</el-button>
        <el-button type="success" text disabled>Success</el-button>
        <el-button type="info" text disabled>Info</el-button>
        <el-button type="warning" text disabled>Warning</el-button>
        <el-button type="danger" text disabled>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button type="primary" icon="Edit" />
        <el-button type="primary" icon="Share" />
        <el-button type="primary" icon="Delete" />
        <el-button type="primary" icon="Search">Search</el-button>
        <el-button type="primary">
            Upload<el-icon class="el-icon--right">
                <Upload />
            </el-icon>
        </el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button-group class="mb-4">
            <el-button type="primary" icon="ArrowLeft">Previous Page</el-button>
            <el-button type="primary">
                Next Page<el-icon class="el-icon--right">
                    <ArrowRight />
                </el-icon>
            </el-button>
        </el-button-group>
    </el-row>

    <el-row class="mb-4">
        <el-button-group class="mb-4">
            <el-button type="primary" icon="Edit" />
            <el-button type="primary" icon="Share" />
            <el-button type="primary" icon="Delete" />
        </el-button-group>
    </el-row>

    <el-row class="mb-4">
        <el-button type="primary" loading>Loading</el-button>
        <el-button type="primary" loading-icon="Eleme" loading>Loading</el-button>
        <el-button type="primary" loading>
            <template #loading>
                <div class="custom-loading">
                    <svg class="circular" viewBox="-10, -10, 50, 50">
                        <path class="path" d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" />
                    </svg>
                </div>
            </template>
            Loading
        </el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button size="large">Large</el-button>
        <el-button>Default</el-button>
        <el-button size="small">Small</el-button>
        
        <el-button size="large" icon="Search">Search</el-button>
        <el-button icon="Search">Search</el-button>
        <el-button size="small" icon="Search">Search</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button size="large" round>Large</el-button>
        <el-button round>Default</el-button>
        <el-button size="small" round>Small</el-button>

        <el-button size="large" icon="Search" round>Search</el-button>
        <el-button icon="Search" round>Search</el-button>
        <el-button size="small" icon="Search" round>Search</el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button icon="Search" size="large" circle />
        <el-button icon="Search" circle />
        <el-button icon="Search" size="small" circle />
    </el-row>

    <el-row class="mb-4">
        <el-button>button</el-button>
        <el-button tag="div" role="button" tabindex="0">div</el-button>
        <el-button type="primary" tag="a" href="https://github.com/element-plus/element-plus" target="_blank"
            rel="noopener noreferrer">
            a
        </el-button>
    </el-row>

    <el-row class="mb-4">
        <el-button color="#626aef">Default</el-button>
        <el-button color="#626aef" plain>Plain</el-button>

        <el-button color="#626aef" disabled>Disabled</el-button>
        <el-button color="#626aef" disabled plain>Disabled Plain</el-button>
    </el-row>

显示效果

在这里插入图片描述

Border 边框

可用于按钮、卡片、弹窗等组件里。

边框样式

//Solid 1px
border-top: 1px solid var(--el-border-color);

//Dashed 2px
border-top: 2px dashed var(--el-border-color);

圆角样式

//No Radius  border-radius: 0px
borderRadius: var(--el-border-radius)

//Small Radius border-radius: 2px
borderRadius: var(--el-border-radius-small)

//Large Radius border-radius: 4px
borderRadius: var(--el-border-radius-base)

//Round Radius border-radius: 20px
borderRadius: var(--el-border-radius-round)

阴影样式

//Basic Shadow
boxShadow: var(--el-box-shadow)

//Light Shadow
boxShadow: var(--el-box-shadow-light)

//Lighter Shadow
boxShadow: var(--el-box-shadow-lighter)

//Dark Shadow
boxShadow: var(--el-box-shadow-dark)
	<table class="demo-border">
        <tbody>
            <tr>
                <td class="text">Name</td>
                <td class="text">Thickness</td>
                <td class="line">Demo</td>
            </tr>
            <tr>
                <td class="text">Solid</td>
                <td class="text">1px</td>
                <td class="line">
                    <div />
                </td>
            </tr>
            <tr>
                <td class="text">Dashed</td>
                <td class="text">2px</td>
                <td class="line">
                    <div class="dashed" />
                </td>
            </tr>
        </tbody>
    </table>

    <el-row gutter="12" class="demo-radius">
        <el-col span="6" xs="{ span: 12 }">
            <div class="title">No Radius</div>
            <div class="value">
                <code>border-radius: '0px'</code>
            </div>
            <div class="radius" style="borderRadius: var(--el-border-radius)" />
        </el-col>
        <el-col span="6" xs="{ span: 12 }">
            <div class="title">Small Radius</div>
            <div class="value">
                <code>border-radius: '2px'</code>
            </div>
            <div class="radius" style="borderRadius: var(--el-border-radius-small)" />
        </el-col>
        <el-col span="6" xs="{ span: 12 }">
            <div class="title">Large Radius</div>
            <div class="value">
                <code>border-radius: '4px'</code>
            </div>
            <div class="radius" style="borderRadius: var(--el-border-radius-base)" />
        </el-col>
        <el-col span="6" xs="{ span: 12 }">
            <div class="title">Round Radius</div>
            <div class="value">
                <code>border-radius: '20px'</code>
            </div>
            <div class="radius" style="borderRadius: var(--el-border-radius-round)" />
        </el-col>
    </el-row>


    <el-row gutter="12" class="demo-radius white">

        <el-col span="6" xs="{ span: 12 }">
            <div class="radius" style="boxShadow: var(--el-box-shadow)" />
            <div class="title">
                Basic Shadow
            </div>
            <div class="value">
                <code text="xs">
                        --el-box-shadow
                    </code>
            </div>
        </el-col>

        <el-col span="6" xs="{ span: 12 }">
            <div class="radius" style="boxShadow: var(--el-box-shadow-light)" />
            <div class="title">
                Light Shadow
            </div>
            <div class="value">
                <code text="xs">
                        --el-box-shadow-light
                    </code>
            </div>
        </el-col>

        <el-col span="6" xs="{ span: 12 }">
            <div class="radius" style="boxShadow: var(--el-box-shadow-lighter)" />
            <div class="title">
                Lighter Shadow
            </div>
            <div class="value">
                <code text="xs">
                        --el-box-shadow-lighter
                    </code>
            </div>
        </el-col>

        <el-col span="6" xs="{ span: 12 }">
            <div class="radius" style="boxShadow: var(--el-box-shadow-dark)" />
            <div class="title">
                Dark Shadow
            </div>
            <div class="value">
                <code text="xs">
                        --el-box-shadow-dark
                    </code>
            </div>
        </el-col>

    </el-row>
.demo-border .text {
    width: 15%;
}

.demo-border .line {
    width: 70%;
}

.demo-border .line div {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--el-border-color);
}

.demo-border .line .dashed {
    border-top: 2px dashed var(--el-border-color);
}

.white {

    background-color: white;
}

.demo-radius .title {
    color: var(--el-text-color-regular);
    font-size: 18px;
    margin: 10px 0;
}

.demo-radius .value {
    color: var(--el-text-color-primary);
    font-size: 16px;
    margin: 10px 0;
}

.demo-radius .radius {
    height: 40px;
    width: 70%;
    border: 1px solid var(--el-border-color);
    border-radius: 0;
    margin-top: 20px;
    margin-bottom: 20px;
}

显示效果

在这里插入图片描述

Color 色彩

主色
Element Plus 默认的主题色是明亮、友好的蓝色。

Brand Color #409EFF

辅助色
在不同的场景中使用不同的场景颜色

Success #67C23AWarning #E6A23CDanger #F56C6CInfo #909399

中性色
中性色用于文本、背景和边框颜色。 通过运用不同的中性色,来表现层次结构。

Primary Text #E5EAF3Darker Border #636466Darker Fill #424243Basic Black #000000
Regular Text #CFD3DCDark Border #58585BDark Fill #39393ABasic White #FFFFFF
Secondary Text #A3A6ADBase Border #4C4D4FBase Fill #303030Transparent Transparent
Placeholder Text #8D9095Light Border #414243Light Fill #262727Page Background #0A0A0A
Disabled Text #6C6E72Lighter Border #363637Lighter Fill #1D1D1DBase Background #141414
Extra-light Border #2B2B2CExtra-light Fill #191919Overlay Background #1D1E1F
Blank Fill TRANSPARENT

Container 布局容器

用于布局的容器组件,方便快速搭建页面的基本结构:

<el-container>:外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列, 否则会水平左右排列。

<el-header>:顶栏容器。

<el-aside>:侧边栏容器。

<el-main>:主要区域容器。

<el-footer>:底栏容器。

以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。 此外, 的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个

Container

  • direction 子元素的排列方向,‘horizontal’ | ‘vertical’ 默认子元素中有 el-header 或 el-footer 时为 vertical,否则为 horizontal

Header

  • height 顶栏高度,string 默认60px

Aside

  • width 侧边栏宽度,string 默认300px

Footer

  • height 底栏高度,string 默认60px
	//header main
 	<el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>

	//header main footer
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>

	//aside main
	<el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>

	//header aside main
	<el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
    
	//header aside main footer
	<el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>

	//aside header main
	 <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

	//aside header main footer
	<el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>

例子

<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <message />
              </el-icon>Navigator One
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="1-1">Option 1</el-menu-item>
              <el-menu-item index="1-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="1-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>Option4</template>
              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>Navigator Two
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="2-1">Option 1</el-menu-item>
              <el-menu-item index="2-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="2-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>Option 4</template>
              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <setting />
              </el-icon>Navigator Three
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="3-1">Option 1</el-menu-item>
              <el-menu-item index="3-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>Option 4</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar>
          <el-table :data="tableData">
            <el-table-column prop="date" label="Date" width="140" />
            <el-table-column prop="name" label="Name" width="120" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import { ref } from 'vue'

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}

export default {

  data() {
    return {
      tableData: [],
    }
  }, methods: {

    fillData() {

      this.tableData = ref(Array.from({ length: 20 }).fill(item))
    }

  }, created() {

    this.fillData();

  }

}

</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>

显示效果

在这里插入图片描述

Icon 图标

结合 el-icon 使用或直接使用

  • color svg 的 fill 颜色,string 默认继承颜色
  • size svg 图标的大小,size x size,number/string 默认继承字体大小
<!-- 使用 el-icon 为 SVG 图标提供属性 -->
  <el-icon :size="20" style="margin: 8px">
    <Edit />
  </el-icon>
  <el-icon color="#409EFC" class="no-inherit" style="margin: 8px">
    <Share />
  </el-icon>
  <el-icon style="margin: 8px">
    <Delete />
  </el-icon>
  <el-icon class="is-loading" style="margin: 8px">
    <Loading />
  </el-icon>
  <el-button type="primary" style="margin: 8px">
    <el-icon style="vertical-align: middle">
      <Search />
    </el-icon>
    <span style="vertical-align: middle"> Search </span>
  </el-button>

  <!-- 或者独立使用它,不从父级获取属性 -->
  <div style="font-size: 20px; margin-top: 8px">
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Share style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
  </div>

显示效果

在这里插入图片描述

图标集合

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Layout 布局

通过基础的 24 分栏,迅速简便地创建布局。

组件默认使用 Flex 布局,不需要手动设置 type=“flex”。

请注意父容器避免使用 inline 相关样式,会导致组件宽度不能撑满。

Row

  • gutter 栅格间隔,number 默认0
  • justify 水平排列方式,可选值 ‘start’ | ‘end’ | ‘center’ | ‘space-around’ | ‘space-between’ | ‘space-evenly’ 默认start
  • align 垂直排列方式,可选值 ‘top’ | ‘middle’ | ‘bottom’ 默认top
  • tag 自定义元素标签,string 默认div

Col

  • span 栅格占据的列数,number 默认24
  • offset 栅格左侧的间隔格数,number 默认0
  • push 栅格向右移动格数,number 默认0
  • pull 栅格向左移动格数 ,number 默认0
  • xs <768px 响应式栅格数或者栅格属性对象,number/ object
  • sm ≥768px 响应式栅格数或者栅格属性对象,number/ object
  • md ≥992px 响应式栅格数或者栅格属性对象 ,number/ object
  • lg ≥1200px 响应式栅格数或者栅格属性对象,number/ object
  • xl ≥1920px 响应式栅格数或者栅格属性对象,number/ object
  • tag 自定义元素标签,string 默认div

object: {span?: number, offset?: number, pull?: number, push?: number}

Element Plus 额外提供了一系列类名,用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上。 如果需要,请自行引入以下文件:

import 'element-plus/theme-chalk/display.css'

这些类名为:

  • hidden-xs-only - 当视口在 xs 尺寸时隐藏
  • hidden-sm-only - 当视口在 sm 尺寸时隐藏
  • hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
  • hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
  • hidden-md-only - 当视口在 md 尺寸时隐藏
  • hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
  • hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
  • hidden-lg-only - 当视口在 lg 尺寸时隐藏
  • hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
  • hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
  • hidden-xl-only - 当视口在 xl 尺寸时隐藏
	//基础布局
	<el-row :gutter="20">
        <el-col :span="24">
            <div class="grid-content ep-bg-purple-dark" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="12">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="16">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="16">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    
    //列偏移 通过指定 col 组件的 offset 属性可以指定分栏偏移的栏数。
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6" :offset="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="6" :offset="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6" :offset="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="12" :offset="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.ep-bg-purple {

    background-color: purple;
}

.ep-bg-purple-light {

    background-color: lightpink;
}

.ep-bg-purple-dark {

    background-color: darkblue;
}

显示效果

在这里插入图片描述

	//对齐方式 通过justify 属性来定义子元素的排版方式,其取值为start、center、end、space-between、space-around或space-evenly。
	<el-row class="row-bg">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row class="row-bg" justify="center">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row class="row-bg" justify="end">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row class="row-bg" justify="space-between">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row class="row-bg" justify="space-around">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row class="row-bg" justify="space-evenly">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>

	//响应式布局 五个响应尺寸:xs、sm、md、lg 和 xl。
	<el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
    </el-row>

显示效果

在这里插入图片描述

Link 链接

文字超链接

  • type 类型,可选值 ‘primary’ | ‘success’ | ‘warning’ | ‘danger’ | ‘info’ | ‘default’ 默认default
  • underline 是否下划线,boolean 默认true
  • disabled 是否禁用状态,boolean 默认false
  • href 原生 href 属性,string
  • icon 图标组件,string/Component
	//文字链接类型
 	<div>
        <el-link href="https://element-plus.org" target="_blank">default</el-link>
        <el-link type="primary">primary</el-link>
        <el-link type="success">success</el-link>
        <el-link type="warning">warning</el-link>
        <el-link type="danger">danger</el-link>
        <el-link type="info">info</el-link>
    </div>

	//文字链接不可用状态。
    <div>
        <el-link disabled>default</el-link>
        <el-link type="primary" disabled>primary</el-link>
        <el-link type="success" disabled>success</el-link>
        <el-link type="warning" disabled>warning</el-link>
        <el-link type="danger" disabled>danger</el-link>
        <el-link type="info" disabled>info</el-link>
    </div>

	//文字链接下划线。
    <div>
        <el-link :underline="false">Without Underline</el-link>
        <el-link>With Underline</el-link>
    </div>

	//带图标的链接 传递组件名称的字符串(提前注册)或组件本身是一个 SVG Vue 组件
    <div>
        <el-link icon="Edit">Edit</el-link>
        <el-link>
            Check<el-icon class="el-icon--right"><icon-view /></el-icon>
        </el-link>
    </div>
.el-link {
    margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}

显示效果

在这里插入图片描述

Text

文本的常见操作

  • type 类型,可选值 ‘primary’ | ‘success’ | ‘warning’ | ‘danger’ | ‘info’
  • size 大小 ,可选值 ‘large’ | ‘default’ | ‘small’ 默认default
  • truncated 显示省略号,boolean 默认false
  • tag 自定义元素标签,string 默认span
	//由 type 属性来选择 Text 的类型。
	<div>
        <el-text class="mx-1">Default</el-text>
        <el-text class="mx-1" type="primary">Primary</el-text>
        <el-text class="mx-1" type="success">Success</el-text>
        <el-text class="mx-1" type="info">Info</el-text>
        <el-text class="mx-1" type="warning">Warning</el-text>
        <el-text class="mx-1" type="danger">Danger</el-text>
    </div>

	//使用 size 属性配置尺寸,可选的尺寸大小有: large, default 或 small
    <div>
        <el-text class="mx-1" size="large">Large</el-text>
        <el-text class="mx-1">Default</el-text>
        <el-text class="mx-1" size="small">Small</el-text>
    </div>

	//通过 truncated 属性,在文本超过视图或最大宽度设置时展示省略符。
    <div>
        <el-text class="w-100px" truncated>Self element set width 100px</el-text>
        <el-row>
            <el-col :span="4" :offset="10">
                <el-text truncated>Squeezed by parent element</el-text>
            </el-col>
        </el-row>
    </div>

	//使用属性 tag 覆盖元素
    <div>
        <el-space direction="vertical">
            <el-text>span</el-text>
            <el-text tag="p">This is a paragraph.</el-text>
            <el-text tag="b">Bold</el-text>
            <el-text tag="i">Italic</el-text>
            <el-text>
                This is
                <el-text tag="sub" size="small">subscript</el-text>
            </el-text>
            <el-text>
                This is
                <el-text tag="sup" size="small">superscript</el-text>
            </el-text>
            <el-text tag="ins">Inserted</el-text>
            <el-text tag="del">Deleted</el-text>
            <el-text tag="mark">Marked</el-text>
        </el-space>
    </div>

	//混合使用 Text 组件
    <div>
        <el-space direction="vertical">
            <el-text>
                <el-icon>
                    <ElementPlus />
                </el-icon>
                Element-Plus
            </el-text>
            <el-row>
                <el-text>Rate</el-text>
                <el-rate class="ml-1" />
            </el-row>
            <el-text>
                This is text mixed icon
                <el-icon>
                    <Bell />
                </el-icon>
                and component
                <el-button>Button</el-button>
            </el-text>
        </el-space>
    </div>
.mx-1 {
    margin-left: 1em;
    margin-right: 1em;
}

.ml-1 {

    margin-left: 1em;
}

div {

    margin-top: 10px;
}

.w-100px {

    width: 100px;
}

显示效果

在这里插入图片描述

Scrollbar 滚动条

用于替换浏览器原生滚动条。

  • height 滚动条高度,string/number
  • max-height 滚动条最大高度,string/number
  • native 是否使用原生滚动条样式,boolean 默认false
  • wrap-style 包裹容器的自定义样式,string/object
  • wrap-class 包裹容器的自定义类名,string
  • view-style 视图的自定义样式,string/ object
  • view-class 视图的自定义类名,string
  • noresize 不响应容器尺寸变化,如果容器尺寸不会发生变化,最好设置它可以优化性能,boolean 默认false
  • tag 视图的元素标签,string 默认div
  • always 滚动条总是显示,boolean 默认false
  • min-size 滚动条最小尺寸,number 默认20

object CSSSProperties | CSSSProperties[] | string[]

Events

  • scroll 当触发滚动事件时,返回滚动的距离 Function ({ scrollLeft: number, scrollTop: number }) => void

Exposes

  • handleScroll 触发滚动事件,Function () => void
  • scrollTo 滚动到一组特定坐标,Function (options: ScrollToOptions | number, yCoord?: number) => void
  • setScrollTop 设置滚动条到顶部的距离,Function (scrollTop: number) => void
  • setScrollLeft 设置滚动条到左边的距离,Function (scrollLeft: number) => void
  • update 手动更新滚动条状态,Function () => void
  • wrapRef 滚动条包裹的 ref 对象,object Ref
<template>
    <!-- 通过 height 属性设置滚动条高度,若不设置则根据父容器高度自适应。 -->
    <el-scrollbar height="100px">
        <p v-for="item in 20" :key="item" class="scrollbar-height-item">{{ item }}</p>
    </el-scrollbar>

    <!-- 当元素宽度大于滚动条宽度时,会显示横向滚动条。 -->
    <el-scrollbar>
        <div class="scrollbar-flex-content">
            <p v-for="item in 50" :key="item" class="scrollbar-horizontal-item">
                {{ item }}
            </p>
        </div>
    </el-scrollbar>

    <!-- 当元素高度超过最大高度,才会显示滚动条。 -->
    <el-button @click="add">Add Item</el-button>
    <el-button @click="onDelete">Delete Item</el-button>
    <el-scrollbar max-height="150px">
        <p v-for="item in count" :key="item" class="scrollbar-height-item">
            {{ item }}
        </p>
    </el-scrollbar>

    <!-- 通过使用 setScrollTop 与 setScrollLeft 方法,可以手动控制滚动条滚动。 -->
    <el-scrollbar ref="scrollbarRef" height="100px" always @scroll="({ scrollTop }) => {value = scrollTop}">
        <div ref="innerRef">
            <p v-for="item in 20" :key="item" class="scrollbar-height-item">
                {{ item }}
            </p>
        </div>
    </el-scrollbar>

    <el-slider v-model="value" :max="max" :format-tooltip="formatTip"  @input="(value) => {$refs.scrollbarRef.setScrollTop(value)}"/>
</template>

<script>

export default {

    data() {
        return {
            count: 3,
            max: 0,
            value: 0
        }
    }, methods: {

        add() {

            this.count++

        }, onDelete() {

            if (this.count > 0) {
                this.count--
            }

        }, formatTip(value){

            return `${value} px`
        }

    }, mounted(){

        this.max = this.$refs.innerRef.clientHeight - 80
    }
}

</script>
  
<style scoped>
.scrollbar-height-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);

}

.scrollbar-flex-content {
    display: flex;
}

.scrollbar-horizontal-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
}


.el-slider {
    margin-top: 20px;
}
</style>
  

显示效果

在这里插入图片描述

Space 间距

通过间距组件来给多个组件之间提供间距

  • alignment 对齐的方式,可选值 ‘center’ | ‘normal’ | ‘stretch’ | … 默认center
  • class 类名,string/object/array
  • direction 排列的方向,可选值 ‘vertical’ | ‘horizontal’ 默认horizontal
  • prefix-cls 给 space-items 的类名前缀,string
  • style 额外样式,string/object
  • spacer 间隔符,string/number/VNode
  • size 间隔大小,‘default’ | ‘small’ | ‘large’ / number / array 默认small
  • wrap 设置是否自动折行,boolean 默认false
  • fill 子元素是否填充父容器,boolean 默认false
  • fill-ratio 填充父容器的比例,number 默认100
<template>
    <el-space direction="vertical" alignment="start" :size="30">
        <!-- 控制间距的大小 -->
        <el-radio-group v-model="size">
            <el-radio :label="'large'">large</el-radio>
            <el-radio :label="'default'">default</el-radio>
            <el-radio :label="'small'">small</el-radio>
        </el-radio-group>

        <!-- 自定义 Size -->
        <el-slider v-model="size" style="width: 300px" />

        <el-space wrap :size="size" style="width: 600px">
            <el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
                <template #header>
                    <div class="card-header">
                        <span>Card name</span>
                        <el-button class="button" text>Operation button</el-button>
                    </div>
                </template>
                <div v-for="o in 4" :key="o" class="text item">
                    {{ 'List item ' + o }}
                </div>
            </el-card>
        </el-space>
    </el-space>

    <!-- 垂直布局 -->
    <el-space direction="vertical">
        <el-card v-for="i in 2" :key="i" class="box-card" style="width: 250px">
            <template #header>
                <div class="card-header">
                    <span>Card name</span>
                    <el-button class="button" text>Operation button</el-button>
                </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">
                {{ 'List item 2-' + o }}
            </div>
        </el-card>
    </el-space>


    <!-- 利用 wrap 属性控制换行 -->
    <el-space wrap style="width: 600px">
        <div v-for="i in 20" :key="i">
            <el-button text> Text button </el-button>
        </div>
    </el-space>

    <!-- 字母数字类型分隔符 -->
    <el-space :size="size" spacer="|">
        <div v-for="i in 2" :key="i">
            <el-button> button {{ i }} </el-button>
        </div>
    </el-space>

    <!-- VNode 类型分隔符 -->
    <el-space :size="size" :spacer="spacer">
        <div v-for="i in 2" :key="i">
            <el-button> button {{ i }} </el-button>
        </div>
    </el-space>


    <!-- 使用 alignment 属性来对齐 -->
    <div class="alignment-container">
        <el-space>
            string
            <el-button> button </el-button>
            <el-card>
                <template #header> header </template>
                body
            </el-card>
        </el-space>
    </div>
    <div class="alignment-container">
        <el-space alignment="flex-start">
            string
            <el-button> button </el-button>
            <el-card>
                <template #header> header </template>
                body
            </el-card>
        </el-space>
    </div>
    <div class="alignment-container">
        <el-space alignment="flex-end">
            string
            <el-button> button </el-button>
            <el-card>
                <template #header> header </template>
                body
            </el-card>
        </el-space>
    </div>

    <!-- 用 fill 属性让子节点自动填充容器 -->
    <!-- 使用 fillRatio 参数,自定义填充的比例, 默认值为 100,代表基于父容器宽度的 100% 进行填充 -->
    <div style="margin-bottom: 15px">
        direction:
        <el-radio v-model="direction" label="horizontal">horizontal</el-radio>
        <el-radio v-model="direction" label="vertical">vertical</el-radio>
    </div>
    <div style="margin-bottom: 15px">
        fillRatio:<el-slider v-model="fillRatio" />
    </div>
    <div style="margin-bottom: 15px">fill: <el-switch v-model="fill" /></div>
    <el-space :fill="fill" wrap  :fill-ratio="fillRatio" :direction="direction" style="width: 100%">
        <el-card v-for="i in 5" :key="i" class="box-card">
            <template #header>
                <div class="card-header">
                    <span>Card name</span>
                    <el-button class="button" text>Operation button</el-button>
                </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">
                {{ 'List item ' + o }}
            </div>
        </el-card>
    </el-space>
</template>

<script>

import { h } from 'vue'
import { ElDivider } from 'element-plus'

export default {

    data() {

        return {

            size: 'default',
            spacer: h(ElDivider, { direction: 'vertical' }),
            fill: true,
            direction: 'horizontal',
            fillRatio: 30
        }
    }
}

</script>

<style>
.alignment-container {
    width: 240px;
    margin-bottom: 20px;
    padding: 8px;
    border: 1px solid var(--el-border-color);
}
</style>
    

显示效果

在这里插入图片描述
在这里插入图片描述

Typography 排版

字体

font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

在这里插入图片描述

<template>
    <div class="demo-typo-size">
		<!-- 字体 -->
        <p
            style="font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
            chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng
            míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

        <p style="font-family: 'Helvetica Neue';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng
            míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

        <p style="font-family: Helvetica;">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng míng
            yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

        <p style="font-family: 'PingFang SC';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng
            míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

        <p style="font-family: 'Hiragino Sans GB';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu
            wàng míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

        <p style="font-family: 'Microsoft YaHei';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng
            míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

        <p style="font-family: '微软雅黑';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng míng yuè
            举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

        <p style="font-family: Arial;">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng míng yuè
            举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

        <p style="font-family: sans-serif;">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng míng
            yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>

    </div>

	<!-- 字号 -->
    <table class="demo-typo-size">
        <tbody>
            <tr>
                <td>Level</td>
                <td>Font Size</td>
                <td class="color-dark-light">Demo</td>
            </tr>
            <tr v-for="(fontSize, i) in fontSizes" :key="i" :style="`font-size: var(--el-font-size-${fontSize.type})`">
                <td>{{ fontSize.level }}</td>
                <td>
                    {{
                        fontSize.size +
                        ' ' +
                        formatType(fontSize.type)
                    }}
                </td>
                <td>Build with Element</td>
            </tr>
        </tbody>
    </table>

	<!-- 行高 -->
    <div>
        <ul class="lineH-right" style="width: 300px;">
            <!-- line-height:1 无行高        line-height:1.3 紧凑        line-height:1.5 常规        line-height:1.7 宽松 -->
            <li style="line-height: 1; background-color: aqua">line-height:1 <span>No line height</span></li>
            <li style="line-height: 1.3; background-color:aquamarine">line-height:1.3 <span>Compact</span></li>
            <li style="line-height: 1.5; background-color:azure">line-height:1.5 <span>Regular</span></li>
            <li style="line-height: 1.7; background-color:bisque">line-height:1.7 <span>Loose</span></li>
        </ul>
    </div>
</template>
  
<script>

export default {

    data() {

        return {

            fontSizes: [
                {
                    level: 'Supplementary text',//辅助文字
                    type: 'extra-small',
                    size: '12px'
                },
                {
                    level: 'Body (small)',//正文(小)
                    type: 'small',
                    size: '13px'
                },
                {
                    level: 'Body',//正文
                    type: 'base',
                    size: '14px'
                },
                {
                    level: 'Small Title',//小标题
                    type: 'medium',
                    size: '16px'
                },
                {
                    level: 'Title',//标题
                    type: 'large',
                    size: '18px'
                },
                {
                    level: 'Main Title',//主标题
                    type: 'extra-large',
                    size: '20px'
                },
            ],
        }
    }, methods: {

        formatType(type) {

            return type
                .split('-')
                .map((item) => item.charAt(0).toUpperCase() + item.slice(1))
                .join(' ')

        }
    }
}

</script>

<style>.demo-typo-size {

    width: 600px;
    background-color: cadetblue;
}</style>
  

显示效果

在这里插入图片描述

Config Provider 全局配置

Config Provider 被用来提供全局的配置选项

  • locale 翻译文本对象,object {name: string, el: TranslatePair} 默认en
  • size 全局组件大小,可选值 ‘large’ | ‘default’ | ‘small’ 默认default
  • zIndex 全局初始化 zIndex 的值,number
  • namespace 全局组件类名称前缀 (需要配合 $namespace 使用),string 默认el
  • button 按钮相关配置, object {autoInsertSpace?: boolean}
  • message 消息相关配置, object {max?: number}
  • experimental-features 将要添加的实验阶段的功能,所有功能都是默认设置为 false,object

button

  • autoInsertSpace 自动在两个中文字符之间插入空格,boolean 默认false

message

  • max 可同时显示的消息最大数量,number
<template>
    <div>
        <el-button @click="toggle">Switch Language</el-button>
        <br />

        <!-- 配置多语言 -->
        <el-config-provider :locale="locale">
            <el-table :data="[]" />
            <el-pagination :total="100" />
        </el-config-provider>
    </div>

    <!-- 对按钮进行配置 -->
    <div  class="mb-2">
        <div>
            <el-checkbox v-model="config.autoInsertSpace">autoInsertSpace</el-checkbox>
        </div>

        <el-config-provider :button="config">
            <el-button>中文</el-button>
        </el-config-provider>
    </div>

    <!-- 对消息进行配置 -->
    <div>
        <el-config-provider :message="msgConfig">
            <el-button @click="open">OPEN</el-button>
        </el-config-provider>
    </div>
</template>
  
<script>

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

import { ElMessage } from 'element-plus'

export default {

    data() {

        return {

            language: 'zh-cn',
            locale: '',
            config: { autoInsertSpace: true },
            msgConfig: { max: 3 }
        }

    },
    methods: {

        toggle() {

            this.language = this.language === 'zh-cn' ? 'en' : 'zh-cn'
            this.getLocale();
        },
        getLocale() {

            this.locale = this.language === 'zh-cn' ? zhCn : en

        },open(){

            ElMessage('This is a message.')
        }
    },
    created() {

        this.getLocale();
    }

}


</script>

<style>
.mb-1 {

    margin-bottom: 1em;
}

.mb-2 {

    margin-bottom: 2em;
}
</style>
  

显示效果

在这里插入图片描述

Form 表单组件

自动补全输入框

根据输入内容提供对应的输入建议。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值