Element-UI开发指南--动画和组件基础(二)

最新推荐文章于 2023-11-08 15:03:42 发布
最新推荐文章于 2023-11-08 15:03:42 发布
阅读量1.7k 收藏 2
点赞数 1
分类专栏： Vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43853746/article/details/107051185
版权
前端 同时被 2 个专栏收录
78 篇文章 37 订阅
订阅专栏
Vue
11 篇文章 0 订阅
订阅专栏

文章目录

内置过渡动画

Element 内应用在部分组件的过渡动画,可以直接使用。

fade 淡入淡出

提供 el-fade-in-linear 和 el-fade-in 两种效果。
在这里插入图片描述

<template>
  <div>
    <el-button @click="show = !show">Click Me</el-button>

    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
      </transition>
      <transition name="el-fade-in">
        <div v-show="show" class="transition-box">.el-fade-in</div>
      </transition>
    </div>
  </div>
</template>

<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

<style>
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>

zoom 缩放

提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果。
在这里插入图片描述

<template>
  <div>
    <el-button @click="show2 = !show2">Click Me</el-button>

    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-zoom-in-center">
        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
      </transition>

      <transition name="el-zoom-in-top">
        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
      </transition>

      <transition name="el-zoom-in-bottom">
        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    data: () => ({
      show2: true
    })
  }
</script>

<style>
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>

collapse 展开折叠

使用 el-collapse-transition 组件实现折叠展开效果。
在这里插入图片描述

<template>
  <div>
    <el-button @click="show3 = !show3">Click Me</el-button>

    <div style="margin-top: 20px; height: 200px;">
      <el-collapse-transition>
        <div v-show="show3">
          <div class="transition-box">el-collapse-transition</div>
          <div class="transition-box">el-collapse-transition</div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
  export default {
    data: () => ({
      show3: true
    })
  }
</script>

<style>
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>

组件

Layout 布局

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

基础布局

使用单一分栏创建基础的栅格布局。通过 row 和col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
在这里插入图片描述

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

分栏间隔

分栏之间存在间隔。Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。
在这里插入图片描述

<template>
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</template>
<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

混合布局

通过基础的 1/24分栏任意扩展组合形成较为复杂的混合布局。
在这里插入图片描述

<template>
  <div id="app">
<el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
  </div>
</template>
<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

分栏偏移

支持偏移指定的栏数。
在这里插入图片描述

<template>
  <div id="app">
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
  </div>
</template>
<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

对齐方式

通过 flex 布局来对分栏进行灵活的对齐。
在这里插入图片描述

<template>
  <div id="app">
    <el-row type="flex" class="row-bg">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="end">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
中大屏设备:
在这里插入图片描述
超小型设备:
在这里插入图片描述

<template>
  <div id="app">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>

<style>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>

基于断点的隐藏类

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

import 'element-ui/lib/theme-chalk/display.css';

Row 属性

参数说明类型可选值默认值
gutter栅格间隔number—0
type布局模式，可选 flex，现代浏览器下有效string——
justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstart
alignflex 布局下的垂直排列方式stringtop/middle/bottomtop
tag自定义元素标签string*div

Col 属性

参数说明类型可选值默认值
span栅格占据的列数number—24
offset栅格左侧的间隔格数number—0
push栅格向右移动格数number—0
pull栅格向左移动格数number—0
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})——
tag自定义元素标签string*div

Container 布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

常见页面布局

在这里插入图片描述

<template>
<div id="app">
<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>

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

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

<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>

<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>

<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>

<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>
</div>
</template>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

Container 属性

参数说明类型可选值默认值
direction子元素的排列方向stringhorizontal / vertical子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal

Header属性

参数说明类型可选值默认值
height顶栏高度string—60px

Aside 属性

参数说明类型可选值默认值
width侧边栏宽度string—300px

Footer 属性

参数说明类型可选值默认值
height底栏高度string—60px

Color 色彩

Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
主色
Element 主要品牌颜色是鲜艳、友好的蓝色。
在这里插入图片描述
辅助色
除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
在这里插入图片描述
中性色
中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
在这里插入图片描述

Typography 字体

字号

层级字体大小举例
辅助文字12px Extra Small用 Element 快速搭建页面
正文（小）13px Small用 Element 快速搭建页面
正文14px Base用 Element 快速搭建页面
小标题16px Medium用 Element 快速搭建页面
标题18px large用 Element 快速搭建页面
主标题20px Extra large用 Element 快速搭建页面

行高

在这里插入图片描述

Font-family

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

Border 边框

element-ui对边框进行统一规范，可用于按钮、卡片、弹窗等组件里

边框

主要有:1.虚实线类型 2.粗细

圆角

在这里插入图片描述
###投影
在这里插入图片描述

Icon 图标

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

使用方法

直接通过设置类名为 el-icon-iconName 来使用即可。例如：

<template>
<div id="app">
  <i class="el-icon-share"></i>
  <el-button type="primary" icon="el-icon-search">搜索</el-button>
  <el-button type="success" icon="el-icon-share">分享</el-button>
  <el-button type="danger" icon="el-icon-delete">删除</el-button>
  <el-button type="warning" icon="el-icon-edit">编辑</el-button>
</div>
</template>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200630230456175.png
图标集合
这里可以上官网查看图标集合

Button 按钮

使用type、plain、round和circle属性来定义 Button 的样式。
在这里插入图片描述

<template>
  <div id="app">
    <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>

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

    <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>

    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
  </div>
</template>

可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值

文字按钮

没有边框和背景色的按钮。
在这里插入图片描述

<template>
  <div id="app">
    <el-button type="text">文字按钮</el-button>
    <el-button type="text" disabled>文字按钮</el-button>
  </div>
</template>

图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
设置icon属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标。
在这里插入图片描述

<template>
  <div id="app">
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
  </div>
</template>

按钮组

以按钮组的方式出现 ，使用<el-button-group>标签来嵌套按钮 ，常用于多项类似操作
在这里插入图片描述

<template>
  <div id="app">
    <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
    <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <el-button-group>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-share"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>
  </div>
</template>

加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。
要设置为loading状态，只要设置loading属性为true即可。
在这里插入图片描述

<el-button type="primary" :loading="true">加载中</el-button>

不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
通过设置size属性(medium、small、mini)来配置它们。
在这里插入图片描述

<el-row>
  <el-button>默认按钮</el-button>
  <el-button size="medium">中等按钮</el-button>
  <el-button size="small">小型按钮</el-button>
  <el-button size="mini">超小按钮</el-button>
</el-row>
<el-row>
  <el-button round>默认按钮</el-button>
  <el-button size="medium" round>中等按钮</el-button>
  <el-button size="small" round>小型按钮</el-button>
  <el-button size="mini" round>超小按钮</el-button>
</el-row>

属性

参数说明类型可选值默认值
size尺寸stringmedium / small / mini—
type类型stringprimary / success / warning / danger / info / text—
plain是否朴素按钮boolean—false
round是否圆角按钮boolean—false
circle是否圆形按钮boolean—false
loading是否加载中状态boolean—false
disabled是否禁用状态boolean—false
icon图标类名string——
autofocus是否默认聚焦boolean—false
native-type原生type 属性stringbutton / submit / resetbutton

详细开发文档请上Element-UI官网查看

Ly_cat
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element-UI 使用手册文档 V2.4.6 （Vue版本）.pdf
11-18
Element-UI 使用手册文档 V2.4.6 （Vue版本） 致谢 开发指南 安装 快速上手 国际化 自定义主题 内置过渡动画 Basic 基本组件 Layout 布局 Container 布局容器 Color 色彩 Typography 字体 Icon 图标 ...
vue2 + elementUI + scss 制作主题切换+动画效果
Vinca@的博客
03-23 2155
中小型企业管理后台添加主题切换 + 切换动画效果。
ElementUI过渡动画篇
sinat_41772813的博客
03-04 4843
ElementUI过渡动画篇 element官方提供的过渡动画并不能很好的满足使用。我尝试过几种过渡动画的设置方式，最终选择了Animate.css。 一、使用方法？ 引入 引入： npm install animate.css --save 然后在mian.js中引入： import animated from 'animate.css' Vue.use(animated) 二、使用 首先后面中css中使用的animation-name属性是过渡动画名，可以移步 https://www.dowebok
Element-UI中内置动效小记
qq_39203889的博客
08-31 2541
1、前言 为了避免页面各种组件进出太直白，我们常常会给组件加上动效。在element中，为我们提供了内置动画效果： <transition name="el-fade-in"> <div v-show="show" class="transition-box">.el-fade-in</div> </transition> 我们只需要控制显隐即可控制显示特效，非常方便。 2、问题 但是，默认动画效果有时候太快或者太慢，不符合我们的预期，如何调整？ 以渐隐
ElementUI自定义组件之左右折叠展开动画
zhengvipin的博客
09-16 6574
背景 我们都知道，element ui官网提供了一个上下折叠展开动画，在实现可伸缩的查询面板等业务中非常实用。美中不足的是，不支持配置左右过渡动画。而实际开发中，左右过渡动画的场景还比较多，比如左树右表（左树可收缩）等。在此，笔者参考el-collapse-transition实现，做了个简单的左右过渡动画组件。 演示效果 核心代码 beforeEnter(el) { addClass(el, 'drawer-transition') if (!el.dat...
Element UI（一）
紫幻_purple的博客
09-14 1369
目录 一、指南 设计原则 导航 选择合适的导航 侧栏导航 顶部导航 二、开发指南 安装 npm 安装 CDN Hello world 快速上手 ¶使用 vue-cli@3 ¶使用 Starter Kit ¶引入 Element ¶全局配置 ¶开始使用 ¶使用 Nuxt.js 自定义主题 仅替换主题色 在项目中改变 SCSS 变量 命令行主题工具 内置过...
element-内置过渡动画-fade 淡入淡出
xie__jin__cheng的博客
06-21 4773
1.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style type="text/css"> .transition-box.
Element-UI使用手册1
08-03
- **内置过渡动画**：Element-UI内建了丰富的过渡动画效果，方便在组件切换和状态变化时使用。 2. **基本组件**： - **Container布局容器**：提供Row和Col组件，帮助开发者实现响应式的栅格布局系统。 - **Color...
tp5+vue+element-ui开发半分利式商城后台管理模板
02-24
标签 "tp5 vue element ui" 确认了项目的三大技术基础，即后端的ThinkPHP 5、前端的Vue.js和UI组件库Element UI。 在压缩包的文件列表中： - `.gitignore`：定义了版本控制系统Git忽略的文件和目录，避免将不必要...
HTML+Element-ui邮件管理前端界面manage_.zip
最新发布
05-24
Element-UI是基于Vue.js的组件库，提供了一系列预先设计和封装的UI组件，如按钮、表格、下拉菜单、日期选择器等，大大简化了前端开发过程。在邮件管理界面中，以下是一些可能用到的Element-UI组件： 1. **导航栏...
Vue-SSR-Demo::hushed_face:Vue + Vuex + Element-ui + Cookie … 实现 SPA SSR 项目 - demo
05-30
特征 注意：实际上，对于这种大小的应用程序（其中每个异步块只有几千字节），没有必要进行代码拆分，也不是提取额外的 CSS ... 可以在找到详细的 Vue SSR 指南。 构建设置 需要Node.js 7+ # install dependencies
elementui 通过事件触发动画
CMDN123456的博客
04-24 401
通过事件触发动画
【Element UI】el-popover的弹出框动画，设置transition属性无效
weixin_46902884的博客
11-08 1419
使用el-popover组件时，弹出框的动画默认是fade-in-linear，有的项目需求中不喜欢淡入淡出的动效，希望改为其他动画效果，我们查阅文档会发现没有其他transition属性值介绍，设置为其他的值也没有效果。这样我们就可以将el-popover的transition属性设置为fade 淡入淡出或者zoom 缩放等效果了。此时我们可以在组件所在的页面按需引入element的内置过渡动画。
elementUI内置过渡动画的使用
tanqin的博客
11-02 4123
elementui 内置过渡动画的使用
elementUI弹窗动画
bingmoujs的博客
04-12 620
弹出从右上角由小变大。
Vue elementUI dialog 动画效果+应用场景
sunshineTing2的博客
07-02 5066
前言 因为element-ui dialog本身的动画效果基本就是没动画效果,所以需要另外设置(下面会讲到) 应用场景描述 一、场景一 1.在第一屏, 机器人图标左右摆放,absolute定位 2.左侧按钮, 弹框定位在左侧; 右侧按钮,弹框定位在右侧. 代码实现 ::v-deep.el-dialog.robotEva{ margin-right: 50px; // 右侧弹框 } ::v-deep.el-dialog.robotWalle{ margin-left: 50px; //
Vue内置过渡动画-常用的类名
WYHS_0710的博客
02-27 1413
1.fade 淡入淡出 <transition name="el-fade-in-linear"> <div v-show="show" class="transition-box">.el-fade-in-linear</div> </transition> <transition name="el-fade-in...
vue transition css 动画效果
夜惊如水
12-02 445
.el-zoom-in-left-enter-active, .el-zoom-in-left-leave-active{ transition:all0.3slinear; transform:translateX(0%); } .el-zoom-in-left-enter, .el-zoom-in-left-leave{ transform:translateX(-100%); }...
element-ui之el-collapse-transition（折叠展开动画）源码解析学习
热门推荐
weixin_34150830的博客
01-20 4万+
2019独角兽企业重金招聘Python工程师标准>>> ...
element ui动画
09-01
- *1* *2* *3* [Element-UI开发指南--动画和组件基础(二)](https://blog.csdn.net/weixin_43853746/article/details/107051185)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值