devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ElementUI学习笔记，已完结！！！_element ui笔记

作者：Gausst松鼠会 | 2024-02-16 22:47:56

赞

踩

element ui笔记

ElementUI

一.介绍ElementUI

ElementUI中文网 ：https://element.eleme.cn/#/zh-CN

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。

1.设计原则

Consistency

  • 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

  • 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

  • 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

  • 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

  • 简化流程：设计简洁直观的操作流程；

  • 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；

  • 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

  • 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；

  • 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

2.ElementUI的优缺点

优点：

(1).一致性 Consistency

  • 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

  • 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

(2).反馈 Feedback

  • 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

  • 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

(3).效率 Efficiency

  • 简化流程：设计简洁直观的操作流程；

  • 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；

  • 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

(4).可控 Controllability

  • 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；

  • 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

缺点：

(1).<el-input>无法完全兼容<input> 场景：<el-input>和vuejs结合起来时，无法实现输入框中的动态更新 解决方法：v-model要和<input/>搭配起来才能实现实时更新 官方解释原因：For languages that require an IME (Chinese, Japanese, Korean etc.), you’ll notice that v-model doesn’t get updated during IME composition. If you want to cater for these updates as well, use input event instead.是说中文日语等需要IME这种跟语言解释方法相关的输入框，不能实现vuejs的v-model属性的实时更新（即它的值改变了，但不会马上呈现在页面上）

(2).<el-button>对disabled属性的不支持 应用场景：有一个输入框，在框内没有内容时禁用旁边的删除按钮 方法：disabled属性 js中写：document.getElementById("ididid").disabled = true/false 但是，如果是<el-button>的话，虽然触发了js中的代码，但是它的disabled属性不会显示在页面上，应该是它对disabled属性支持的不好。 所以只能使用<button>而不是<el-button>来使用disabled属性

二.入门

1.安装：

CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

  1. <!-- 引入样式 -->
  2. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  3. <!-- 引入组件库 -->
  4. <script src="https://unpkg.com/element-ui/lib/index.js"></script>

官方建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

2.HelloWorld程序

通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!-- 导入 CSS 样式 -->
  6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  7.     <!-- 导入Vue -->
  8.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  9.     <!-- 引入组件库 -->
  10.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  11. </head>
  12. <body>
  13. <div id="app">
  14.     <el-button @click="visible = true">Button</el-button>
  15.     <el-dialog :visible.sync="visible" title="Hello world">
  16.       <p>Try Element</p>
  17.     </el-dialog>
  18. </div>
  19. </body>
  20. <script>
  21.     new Vue({
  22.         el: '#app',
  23.         data: function () {
  24.             return {visible: false}
  25.         }
  26.     })
  27. </script>
  28. </html>
  1.  .sync 修饰符
  2.         在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
  3. ​
  4. 这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：
  5. ​
  6. this.$emit('update:title', newTitle)
  7. 然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：
  8. ​
  9. <text-document
  10.   v-bind:title="doc.title"
  11.   v-on:update:title="doc.title = $event"
  12. ></text-document>
  13. 为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：
  14. ​
  15. <text-document v-bind:title.sync="doc.title"></text-document>
  16. 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
  17. ​
  18. 当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：
  19. ​
  20. <text-document v-bind.sync="doc"></text-document>
  21. 这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
  22. ​
  23. 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

三.组件

1.基本组件

(1).Layout 布局

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

基础布局

使用单一分栏创建基础的栅格布局。

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

  1. <el-row>
  2.   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
  3. </el-row>
  4. <el-row>
  5.   <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  6.   <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  7. </el-row>
  8. <el-row>
  9.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  10.   <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  11.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  12. </el-row>
  13. <el-row>
  14.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  15.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  16.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  17.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  18. </el-row>
  19. <el-row>
  20.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  21.   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  22.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  23.   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  24.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  25.   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  26. </el-row>
  27. ​
  28. <style>
  29.   .el-row {
  30.     margin-bottom: 20px;
  31.     &:last-child {
  32.       margin-bottom: 0;
  33.     }
  34.   }
  35.   .el-col {
  36.     border-radius: 4px;
  37.   }
  38.   .bg-purple-dark {
  39.     background: #99a9bf;
  40.   }
  41.   .bg-purple {
  42.     background: #d3dce6;
  43.   }
  44.   .bg-purple-light {
  45.     background: #e5e9f2;
  46.   }
  47.   .grid-content {
  48.     border-radius: 4px;
  49.     min-height: 36px;
  50.   }
  51.   .row-bg {
  52.     padding: 10px 0;
  53.     background-color: #f9fafc;
  54.   }
  55. </style>

在线运行

分栏间隔

分栏之间存在间隔。

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

  1. <el-row :gutter="20">
  2.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  4.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  5.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  6. </el-row>
  7. ​
  8. <style>
  9.   .el-row {
  10.     margin-bottom: 20px;
  11.     &:last-child {
  12.       margin-bottom: 0;
  13.     }
  14.   }
  15.   .el-col {
  16.     border-radius: 4px;
  17.   }
  18.   .bg-purple-dark {
  19.     background: #99a9bf;
  20.   }
  21.   .bg-purple {
  22.     background: #d3dce6;
  23.   }
  24.   .bg-purple-light {
  25.     background: #e5e9f2;
  26.   }
  27.   .grid-content {
  28.     border-radius: 4px;
  29.     min-height: 36px;
  30.   }
  31.   .row-bg {
  32.     padding: 10px 0;
  33.     background-color: #f9fafc;
  34.   }
  35. </style>

 

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

  1. <el-row :gutter="20">
  2.   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  4. </el-row>
  5. <el-row :gutter="20">
  6.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  7.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  8.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  9.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  10. </el-row>
  11. <el-row :gutter="20">
  12.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  13.   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  14.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  15. </el-row>
  16. ​
  17. <style>
  18.   .el-row {
  19.     margin-bottom: 20px;
  20.     &:last-child {
  21.       margin-bottom: 0;
  22.     }
  23.   }
  24.   .el-col {
  25.     border-radius: 4px;
  26.   }
  27.   .bg-purple-dark {
  28.     background: #99a9bf;
  29.   }
  30.   .bg-purple {
  31.     background: #d3dce6;
  32.   }
  33.   .bg-purple-light {
  34.     background: #e5e9f2;
  35.   }
  36.   .grid-content {
  37.     border-radius: 4px;
  38.     min-height: 36px;
  39.   }
  40.   .row-bg {
  41.     padding: 10px 0;
  42.     background-color: #f9fafc;
  43.   }
  44. </style>

 

分栏偏移

支持偏移指定的栏数。

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

  1. <el-row :gutter="20">
  2.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  4. </el-row>
  5. <el-row :gutter="20">
  6.   <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  7.   <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  8. </el-row>
  9. <el-row :gutter="20">
  10.   <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  11. </el-row>
  12. ​
  13. <style>
  14.   .el-row {
  15.     margin-bottom: 20px;
  16.     &:last-child {
  17.       margin-bottom: 0;
  18.     }
  19.   }
  20.   .el-col {
  21.     border-radius: 4px;
  22.   }
  23.   .bg-purple-dark {
  24.     background: #99a9bf;
  25.   }
  26.   .bg-purple {
  27.     background: #d3dce6;
  28.   }
  29.   .bg-purple-light {
  30.     background: #e5e9f2;
  31.   }
  32.   .grid-content {
  33.     border-radius: 4px;
  34.     min-height: 36px;
  35.   }
  36.   .row-bg {
  37.     padding: 10px 0;
  38.     background-color: #f9fafc;
  39.   }
  40. </style>

 

对齐方式

通过 flex 布局来对分栏进行灵活的对齐。

将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

  1. <el-row type="flex" class="row-bg">
  2.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  4.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  5. </el-row>
  6. <el-row type="flex" class="row-bg" justify="center">
  7.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  8.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  9.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  10. </el-row>
  11. <el-row type="flex" class="row-bg" justify="end">
  12.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  13.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  14.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  15. </el-row>
  16. <el-row type="flex" class="row-bg" justify="space-between">
  17.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  18.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  19.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  20. </el-row>
  21. <el-row type="flex" class="row-bg" justify="space-around">
  22.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  23.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  24.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  25. </el-row>
  26. ​
  27. <style>
  28.   .el-row {
  29.     margin-bottom: 20px;
  30.     &:last-child {
  31.       margin-bottom: 0;
  32.     }
  33.   }
  34.   .el-col {
  35.     border-radius: 4px;
  36.   }
  37.   .bg-purple-dark {
  38.     background: #99a9bf;
  39.   }
  40.   .bg-purple {
  41.     background: #d3dce6;
  42.   }
  43.   .bg-purple-light {
  44.     background: #e5e9f2;
  45.   }
  46.   .grid-content {
  47.     border-radius: 4px;
  48.     min-height: 36px;
  49.   }
  50.   .row-bg {
  51.     padding: 10px 0;
  52.     background-color: #f9fafc;
  53.   }
  54. </style>

 

响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

  1. <el-row :gutter="10">
  2.   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  4.   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  5.   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
  6. </el-row>
  7.  
  8. <style>
  9.   .el-col {
  10.     border-radius: 4px;
  11.   }
  12.   .bg-purple-dark {
  13.     background: #99a9bf;
  14.   }
  15.   .bg-purple {
  16.     background: #d3dce6;
  17.   }
  18.   .bg-purple-light {
  19.     background: #e5e9f2;
  20.   }
  21.   .grid-content {
  22.     border-radius: 4px;
  23.     min-height: 36px;
  24.   }
  25. </style>

 

基于断点的隐藏类

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

import 'element-ui/lib/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 尺寸时隐藏

相关参数说明

(2).Container 布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

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

常见页面布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!-- 导入 CSS 样式 -->
  6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  7.     <!-- 导入Vue -->
  8.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  9.     <!-- 引入组件库 -->
  10.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  11.     <style>
  12.         .el-header, .el-footer {
  13.             background-color: #B3C0D1;
  14.             color: #333;
  15.             text-align: center;
  16.             line-height: 60px;
  17.         }
  18.  
  19.         .el-aside {
  20.             background-color: #D3DCE6;
  21.             color: #333;
  22.             text-align: center;
  23.             line-height: 200px;
  24.         }
  25.  
  26.         .el-main {
  27.             background-color: #E9EEF3;
  28.             color: #333;
  29.             text-align: center;
  30.             line-height: 160px;
  31.         }
  32.  
  33.         body > .el-container {
  34.             margin-bottom: 40px;
  35.         }
  36.  
  37.         .el-container:nth-child(5) .el-aside,
  38.         .el-container:nth-child(6) .el-aside {
  39.             line-height: 260px;
  40.         }
  41.  
  42.         .el-container:nth-child(7) .el-aside {
  43.             line-height: 320px;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48. <div id="app">
  49.     <el-container>
  50.         <el-header>Header</el-header>
  51.         <el-main>Main</el-main>
  52.     </el-container>
  53.  
  54.     <el-container>
  55.         <el-header>Header</el-header>
  56.         <el-main>Main</el-main>
  57.         <el-footer>Footer</el-footer>
  58.     </el-container>
  59.  
  60.     <el-container>
  61.         <el-aside width="200px">Aside</el-aside>
  62.         <el-main>Main</el-main>
  63.     </el-container>
  64.  
  65.     <el-container>
  66.         <el-header>Header</el-header>
  67.         <el-container>
  68.             <el-aside width="200px">Aside</el-aside>
  69.             <el-main>Main</el-main>
  70.         </el-container>
  71.     </el-container>
  72.  
  73.     <el-container>
  74.         <el-header>Header</el-header>
  75.         <el-container>
  76.             <el-aside width="200px">Aside</el-aside>
  77.             <el-container>
  78.                 <el-main>Main</el-main>
  79.                 <el-footer>Footer</el-footer>
  80.             </el-container>
  81.         </el-container>
  82.     </el-container>
  83.  
  84.     <el-container>
  85.         <el-aside width="200px">Aside</el-aside>
  86.         <el-container>
  87.             <el-header>Header</el-header>
  88.             <el-main>Main</el-main>
  89.         </el-container>
  90.     </el-container>
  91.  
  92.     <el-container>
  93.         <el-aside width="200px">Aside</el-aside>
  94.         <el-container>
  95.             <el-header>Header</el-header>
  96.             <el-main>Main</el-main>
  97.             <el-footer>Footer</el-footer>
  98.         </el-container>
  99.     </el-container>
  100. </div>
  101. </body>
  102. <script>
  103.     new Vue({
  104.         el: '#app',
  105.     })
  106. </script>
  107. </html>

实例

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.    <head>
  5.       <meta charset="utf-8">
  6.       <title>Layout 布局-基础布局</title>
  7.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.       <!-- 导入Vue -->
  10.       <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.       <!-- 引入组件库 -->
  12.       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13.       <style type="text/css">
  14.          .el-header {
  15.             background-color: #B3C0D1;
  16.             color: #333;
  17.             line-height: 60px;
  18.          }
  19.          
  20.          .el-aside {
  21.             color: #333;
  22.          }
  23.          .menuHeader{
  24.             text-align: center;
  25.          }
  26.       </style>
  27.    </head>
  28.  
  29.    <body>
  30.       <div id="app">
  31.          <el-container style="height: 500px; border: 1px solid #eee">
  32.             <el-aside width="200px">
  33.                <br>
  34.                <br>
  35.                <br>
  36.                <el-menu :default-openeds="['1', '3']">
  37.                      <el-menu-item-group class="menuHeader">
  38.                         <template slot="title">欢迎李造价</template>
  39.                         <el-menu-item index="1-1">进行中项目</el-menu-item>
  40.                         <el-menu-item index="1-2">历史项目</el-menu-item>
  41.                         <el-menu-item index="1-2">个人信息</el-menu-item>
  42.                         <el-menu-item index="1-2">成为造价师</el-menu-item>
  43.                      </el-menu-item-group>
  44.                </el-menu>
  45.             </el-aside>
  46.  
  47.             <el-container>
  48.                <el-header style="text-align: right; font-size: 12px">
  49.                   <el-dropdown>
  50.                      <i class="el-icon-setting" style="margin-right: 15px"></i>
  51.                      <el-dropdown-menu slot="dropdown">
  52.                         <el-dropdown-item>查看</el-dropdown-item>
  53.                         <el-dropdown-item>新增</el-dropdown-item>
  54.                         <el-dropdown-item>删除</el-dropdown-item>
  55.                      </el-dropdown-menu>
  56.                   </el-dropdown>
  57.                   <span>李造价</span>
  58.                </el-header>
  59.  
  60.                <el-main>
  61.                   <el-table :data="tableData">
  62.                      <el-table-column class="tableContent" prop="date" label="项目名称" width="140">
  63.                      </el-table-column>
  64.                      <el-table-column class="tableContent" prop="name" label="发布时间" width="120">
  65.                      </el-table-column>
  66.                      <el-table-column class="tableContent" prop="address" label="专业类型">
  67.                      </el-table-column>
  68.                      <el-table-column class="tableContent" prop="xmzt" label="项目状态" width="120">
  69.                      </el-table-column>
  70.                      <el-table-column class="tableContent" prop="shdate" label="审核通过时间" width="120">
  71.                      </el-table-column>
  72.                      <el-table-column class="tableContent" prop="jzdate" label="截止日期" width="120">
  73.                      </el-table-column>
  74.                      <el-table-column class="tableContent"  label="查看详情" width="120">
  75.                         <a href="http://www.baidu.com" target="_blank">查看详情</a>
  76.                      </el-table-column>
  77.                   </el-table>
  78.                </el-main>
  79.             </el-container>
  80.          </el-container>
  81.       </div>
  82.    </body>
  83.    <script>
  84.       new Vue({
  85.          el: '#app',
  86.          data() {
  87.             const item = {
  88.                date: '造价项目测试1',
  89.                name: '2019-6-10',
  90.                address: '写字楼、住宅、高层住宅、厂房、四星以上酒店、学校、影剧院、医院',
  91.                xmzt:'进行中',
  92.                shdate:'2019-6-20',
  93.                jzdate:'2019-6-15'
  94.             };
  95.             return {
  96.                tableData: Array(3).fill(item)
  97.             }
  98.          }
  99.       })
  100.    </script>
  101.  
  102. </html>

(3).Color 色彩

Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。

主色

Element 主要品牌颜色是鲜艳、友好的蓝色。

辅助色

除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。

中性色

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

(4).Typography 字体

官网：https://element.eleme.cn/#/zh-CN/component/typography

和常规一样

(5).Border 边框

官网:https://element.eleme.cn/#/zh-CN/component/border

和常规一样

(6).Icon 图标

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

更多图标见官网：https://element.eleme.cn/#/zh-CN/component/icon

举例：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.    <head>
  5.       <meta charset="utf-8">
  6.       <title>Layout 布局-基础布局</title>
  7.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.       <!-- 导入Vue -->
  10.       <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.       <!-- 引入组件库 -->
  12.       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13.    </head>
  14.    <style>
  15.       #app{
  16.          width: 500px;
  17.          margin: 200px auto;
  18.       }
  19.       i{
  20.          font-size: 40px;
  21.       }
  22.    </style>
  23.  
  24.    <body>
  25.       <div id="app">
  26.          <i class="el-icon-edit"></i>
  27.          <i class="el-icon-share"></i>
  28.          <i class="el-icon-delete"></i>
  29.          <i class="el-icon-light-rain"></i>
  30.  
  31.          <i class="el-icon-date"></i>
  32.          <i class="el-icon-loading"></i>
  33.          <i class="el-icon-view"></i>
  34.          <i class="el-icon-folder-add"></i>
  35.          <br><br>
  36.          <el-button type="primary" icon="el-icon-search">搜索</el-button>
  37.          <el-button type="primary" icon="el-icon-delete-solid">删除</el-button>
  38.          <el-button type="primary" icon="el-icon-scissors">裁剪</el-button>
  39.       </div>
  40.    </body>
  41.    <script>
  42.       new Vue({
  43.          el: '#app'
  44.       })
  45.    </script>
  46.  
  47. </html>

(7).Button 按钮

常用的操作按钮。

更多按钮见官网：https://element.eleme.cn/#/zh-CN/component/button

使用type、plain、round和circle属性来定义 Button 的样式。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.    <head>
  5.       <meta charset="utf-8">
  6.       <title>Layout 布局-基础布局</title>
  7.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.       <!-- 导入Vue -->
  10.       <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.       <!-- 引入组件库 -->
  12.       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13.    </head>
  14.    <style>
  15.    </style>
  16.  
  17.    <body>
  18.       <div id="app">
  19.          <el-row>
  20.             <el-button>默认按钮</el-button>
  21.             <el-button type="primary">主要按钮</el-button>
  22.             <el-button type="success">成功按钮</el-button>
  23.             <el-button type="info">信息按钮</el-button>
  24.             <el-button type="warning">警告按钮</el-button>
  25.             <el-button type="danger">危险按钮</el-button>
  26.          </el-row>
  27.  
  28.          <el-row>
  29.             <el-button plain>朴素按钮</el-button>
  30.             <el-button type="primary" plain>主要按钮</el-button>
  31.             <el-button type="success" plain>成功按钮</el-button>
  32.             <el-button type="info" plain>信息按钮</el-button>
  33.             <el-button type="warning" plain>警告按钮</el-button>
  34.             <el-button type="danger" plain>危险按钮</el-button>
  35.          </el-row>
  36.  
  37.          <el-row>
  38.             <el-button round>圆角按钮</el-button>
  39.             <el-button type="primary" round>主要按钮</el-button>
  40.             <el-button type="success" round>成功按钮</el-button>
  41.             <el-button type="info" round>信息按钮</el-button>
  42.             <el-button type="warning" round>警告按钮</el-button>
  43.             <el-button type="danger" round>危险按钮</el-button>
  44.          </el-row>
  45.  
  46.          <el-row>
  47.             <el-button icon="el-icon-search" circle></el-button>
  48.             <el-button type="primary" icon="el-icon-edit" circle></el-button>
  49.             <el-button type="success" icon="el-icon-check" circle></el-button>
  50.             <el-button type="info" icon="el-icon-message" circle></el-button>
  51.             <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  52.             <el-button type="danger" icon="el-icon-delete" circle></el-button>
  53.          </el-row>
  54.       </div>
  55.    </body>
  56.    <script>
  57.       new Vue({
  58.          el: '#app'
  59.       })
  60.    </script>
  61.  
  62. </html>

相关参数：

(8).Link 文字链接

文字超链接

更多见官网：https://element.eleme.cn/#/zh-CN/component/link

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.    <head>
  5.       <meta charset="utf-8">
  6.       <title>Layout 布局-基础布局</title>
  7.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.       <!-- 导入Vue -->
  10.       <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.       <!-- 引入组件库 -->
  12.       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13.    </head>
  14.    <style>
  15.    </style>
  16.  
  17.    <body>
  18.       <div id="app">
  19.          <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  20.          <el-link type="primary">主要链接</el-link>
  21.          <el-link type="success">成功链接</el-link>
  22.          <el-link type="warning">警告链接</el-link>
  23.          <el-link type="danger">危险链接</el-link>
  24.          <el-link type="info">信息链接</el-link>
  25.       </div>
  26.    </body>
  27.    <script>
  28.       new Vue({
  29.          el: '#app'
  30.       })
  31.    </script>
  32.  
  33. </html>

相关参数：

2.表单组件

(1).Radio 单选框

在一组备选项中进行单选

更多好看单选框见官网：https://element.eleme.cn/#/zh-CN/component/radio

基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.    <head>
  5.       <meta charset="utf-8">
  6.       <title>Layout 布局-基础布局</title>
  7.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.       <!-- 导入Vue -->
  10.       <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.       <!-- 引入组件库 -->
  12.       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13.    </head>
  14.    <style>
  15.    </style>
  16.  
  17.    <body>
  18.       <div id="app">
  19.          <template>
  20.             <el-radio v-model="radio" label="1">备选项</el-radio>
  21.             <el-radio v-model="radio" label="2">备选项</el-radio>
  22.          </template>
  23.       </div>
  24.    </body>
  25.    <script>
  26.       new Vue({
  27.          el: '#app',
  28.          data () {
  29.             return {
  30.                radio: '1'
  31.             };
  32.          }
  33.       })
  34.    </script>
  35.  
  36. </html>

(2).Checkbox 多选框

一组备选项中进行多选

更多好看多选框见官网：https://element.eleme.cn/#/zh-CN/component/checkbox

基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.    <head>
  5.       <meta charset="utf-8">
  6.       <title>Layout 布局-基础布局</title>
  7.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.       <!-- 导入Vue -->
  10.       <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.       <!-- 引入组件库 -->
  12.       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13.    </head>
  14.    <style>
  15.    </style>
  16.  
  17.    <body>
  18.       <div id="app">
  19.          <template>
  20.             <el-checkbox-group v-model="checkList">
  21.                <el-checkbox label="复选框 A"></el-checkbox>
  22.                <el-checkbox label="复选框 B"></el-checkbox>
  23.                <el-checkbox label="复选框 C"></el-checkbox>
  24.                <el-checkbox label="禁用" disabled></el-checkbox>
  25.                <el-checkbox label="选中且禁用" disabled></el-checkbox>
  26.             </el-checkbox-group>
  27.          </template>
  28.       </div>
  29.    </body>
  30.    <script>
  31.       new Vue({
  32.          el: '#app',
  33.          data () {
  34.             return {
  35.                checkList: ['选中且禁用','复选框 A']
  36.             };
  37.          }
  38.       })
  39.    </script>
  40.  
  41. </html>

(3).Input输入框

更多可见官网：https://element.eleme.cn/#/zh-CN/component/input

使用clearable属性即可得到一个可清空的输入框

使用show-password属性即可得到一个可切换显示隐藏的密码框

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.    <head>
  5.       <meta charset="utf-8">
  6.       <title>Layout 布局-基础布局</title>
  7.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.       <!-- 导入Vue -->
  10.       <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.       <!-- 引入组件库 -->
  12.       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13.    </head>
  14.    <style>
  15.       .el-input{
  16.          width: 300px;
  17.       }
  18.    </style>
  19.  
  20.    <body>
  21.       <div id="app">
  22.          <label>账号</label>
  23.          <el-input
  24.                class="el-input"
  25.                placeholder="请输入内容"
  26.                v-model="input"
  27.                clearable>
  28.          </el-input>
  29.          <br>
  30.          <br>
  31.          <label>密码</label>
  32.          <el-input
  33.                class="el-input"
  34.                placeholder="请输入密码"
  35.                v-model="input2"
  36.                show-password>
  37.          </el-input>
  38.          <br>
  39.          <br>
  40.          <div class="demo-input-suffix">
  41.             <el-input
  42.                   placeholder="请输入内容"
  43.                   prefix-icon="el-icon-search"
  44.                   v-model="input3">
  45.             </el-input>
  46.          </div>
  47.       </div>
  48.    </body>
  49.    <script>
  50.       new Vue({
  51.          el: '#app',
  52.          data () {
  53.             return {
  54.                input:'',
  55.                input2:'',
  56.                input3:'',
  57.             };
  58.          }
  59.       })
  60.    </script>
  61.  
  62. </html>

(4).InputNumber 计数器

仅允许输入标准的数字值，可定义范围

见官网：https://element.eleme.cn/#/zh-CN/component/input-number

(5).Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

见官网：https://element.eleme.cn/#/zh-CN/component/select

(6).Cascader 级联选择器

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

(7).Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

见官网：https://element.eleme.cn/#/zh-CN/component/switch

(8).Slider 滑块

通过拖动滑块在一个固定区间内进行选择

见官网：https://element.eleme.cn/#/zh-CN/component/slider

(9).TimePicker 时间选择器

用于选择或输入日期

见官网：https://element.eleme.cn/#/zh-CN/component/time-picker

(10).DatePicker 日期选择器

用于选择或输入日期

更多见：https://element.eleme.cn/#/zh-CN/component/date-picker

选择日

以「日」为基本单位，基础的日期选择控件

基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Layout 布局-基础布局</title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15. </style>
  16.  
  17. <body>
  18. <div id="app">
  19.     <template>
  20.         <div class="block">
  21.             <span class="demonstration">默认</span>
  22.             <el-date-picker
  23.                     v-model="value1"
  24.                     type="date"
  25.                     placeholder="选择日期">
  26.             </el-date-picker>
  27.         </div>
  28.         <br>
  29.         <div class="block">
  30.             <span class="demonstration">带快捷选项</span>
  31.             <el-date-picker
  32.                     v-model="value2"
  33.                     align="right"
  34.                     type="date"
  35.                     placeholder="选择日期"
  36.                     :picker-options="pickerOptions">
  37.             </el-date-picker>
  38.         </div>
  39.     </template>
  40. </div>
  41. </body>
  42. <script>
  43.     new Vue({
  44.         el: '#app',
  45.         data() {
  46.             return {
  47.                 pickerOptions: {
  48.                     disabledDate(time) {
  49.                         return time.getTime() > Date.now();
  50.                     },
  51.                     shortcuts: [{
  52.                         text: '今天',
  53.                         onClick(picker) {
  54.                             picker.$emit('pick', new Date());
  55.                         }
  56.                     }, {
  57.                         text: '昨天',
  58.                         onClick(picker) {
  59.                             const date = new Date();
  60.                             date.setTime(date.getTime() - 3600 * 1000 * 24);
  61.                             picker.$emit('pick', date);
  62.                         }
  63.                     }, {
  64.                         text: '一周前',
  65.                         onClick(picker) {
  66.                             const date = new Date();
  67.                             date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
  68.                             picker.$emit('pick', date);
  69.                         }
  70.                     }]
  71.                 },
  72.                 value1: '',
  73.                 value2: '',
  74.             };
  75.         }
  76.     })
  77. </script>
  78.  
  79. </html>

(11).DateTimePicker 日期时间选择器

在同一个选择器里选择日期和时间

日期和时间点

通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Layout 布局-基础布局</title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15. </style>
  16.  
  17. <body>
  18. <div id="app">
  19.     <template>
  20.         <div class="block">
  21.             <span class="demonstration">默认</span>
  22.             <el-date-picker
  23.                     v-model="value1"
  24.                     type="datetime"
  25.                     placeholder="选择日期时间">
  26.             </el-date-picker>
  27.         </div>
  28.         <div class="block">
  29.             <span class="demonstration">带快捷选项</span>
  30.             <el-date-picker
  31.                     v-model="value2"
  32.                     type="datetime"
  33.                     placeholder="选择日期时间"
  34.                     align="right"
  35.                     :picker-options="pickerOptions">
  36.             </el-date-picker>
  37.         </div>
  38.         <div class="block">
  39.             <span class="demonstration">设置默认时间</span>
  40.             <el-date-picker
  41.                     v-model="value3"
  42.                     type="datetime"
  43.                     placeholder="选择日期时间"
  44.                     default-time="12:00:00">
  45.             </el-date-picker>
  46.         </div>
  47.     </template>
  48. </div>
  49. </body>
  50. <script>
  51.     new Vue({
  52.         el: '#app',
  53.         data() {
  54.             return {
  55.                 pickerOptions: {
  56.                     shortcuts: [{
  57.                         text: '今天',
  58.                         onClick(picker) {
  59.                             picker.$emit('pick', new Date());
  60.                         }
  61.                     }, {
  62.                         text: '昨天',
  63.                         onClick(picker) {
  64.                             const date = new Date();
  65.                             date.setTime(date.getTime() - 3600 * 1000 * 24);
  66.                             picker.$emit('pick', date);
  67.                         }
  68.                     }, {
  69.                         text: '一周前',
  70.                         onClick(picker) {
  71.                             const date = new Date();
  72.                             date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
  73.                             picker.$emit('pick', date);
  74.                         }
  75.                     }]
  76.                 },
  77.                 value1: '',
  78.                 value2: '',
  79.                 value3: ''
  80.             };
  81.         }
  82.     })
  83. </script>
  84.  
  85. </html>

(12).Upload 上传

通过点击或者拖拽上传文件

更多样式见官网：https://element.eleme.cn/#/zh-CN/component/upload

(13).Rate 评分

评分组件

更多样式见官网：https://element.eleme.cn/#/zh-CN/component/rate

(14).ColorPicker 颜色选择器

用于颜色选择，支持多种格式。

更多样式见官网：https://element.eleme.cn/#/zh-CN/component/color-picker

(15).Transfer 穿梭框

更多样式见官网：https://element.eleme.cn/#/zh-CN/component/transfer

(16).Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form>标签上添加 @submit.native.prevent。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Layout 布局-基础布局</title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .el-form{
  16.         width: 400px;
  17.     }
  18. </style>
  19.  
  20. <body>
  21. <div id="app">
  22.     <el-form ref="form" :model="form" label-width="80px" class="el-form">
  23.         <el-form-item label="活动名称">
  24.             <el-input v-model="form.name"></el-input>
  25.         </el-form-item>
  26.         <el-form-item label="活动区域">
  27.             <el-select v-model="form.region" placeholder="请选择活动区域">
  28.                 <el-option label="区域一" value="shanghai"></el-option>
  29.                 <el-option label="区域二" value="beijing"></el-option>
  30.             </el-select>
  31.         </el-form-item>
  32.         <el-form-item label="活动时间">
  33.             <el-col :span="11">
  34.                 <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  35.             </el-col>
  36.             <el-col class="line" :span="2">-</el-col>
  37.             <el-col :span="11">
  38.                 <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
  39.             </el-col>
  40.         </el-form-item>
  41.         <el-form-item label="即时配送">
  42.             <el-switch v-model="form.delivery"></el-switch>
  43.         </el-form-item>
  44.         <el-form-item label="活动性质">
  45.             <el-checkbox-group v-model="form.type">
  46.                 <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  47.                 <el-checkbox label="地推活动" name="type"></el-checkbox>
  48.                 <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  49.                 <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  50.             </el-checkbox-group>
  51.         </el-form-item>
  52.         <el-form-item label="特殊资源">
  53.             <el-radio-group v-model="form.resource">
  54.                 <el-radio label="线上品牌商赞助"></el-radio>
  55.                 <el-radio label="线下场地免费"></el-radio>
  56.             </el-radio-group>
  57.         </el-form-item>
  58.         <el-form-item label="活动形式">
  59.             <el-input type="textarea" v-model="form.desc"></el-input>
  60.         </el-form-item>
  61.         <el-form-item>
  62.             <el-button type="primary" @click="onSubmit">立即创建</el-button>
  63.             <el-button>取消</el-button>
  64.         </el-form-item>
  65.     </el-form>
  66. </div>
  67. </body>
  68. <script>
  69.     new Vue({
  70.         el: '#app',
  71.         data() {
  72.             return {
  73.                 form: {
  74.                     name: '',
  75.                     region: '',
  76.                     date1: '',
  77.                     date2: '',
  78.                     delivery: false,
  79.                     type: [],
  80.                     resource: '',
  81.                     desc: ''
  82.                 }
  83.             }
  84.         },
  85.         methods: {
  86.             onSubmit() {
  87.                 console.log('submit!');
  88.             }
  89.         }
  90.     })
  91. </script>
  92.  
  93. </html>

3.数据(data)组件

(1).Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

更多样式表格见官网：https://element.eleme.cn/#/zh-CN/component/table

基础表格

基础的表格展示用法。

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Layout 布局-基础布局</title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .el-form{
  16.         width: 400px;
  17.     }
  18. </style>
  19. ​
  20. <body>
  21. <div id="app">
  22.     <template>
  23.         <el-table
  24.                 :data="tableData"
  25.                 style="width: 100%">
  26.             <el-table-column
  27.                     prop="date"
  28.                     label="日期"
  29.                     width="180">
  30.             </el-table-column>
  31.             <el-table-column
  32.                     prop="name"
  33.                     label="姓名"
  34.                     width="180">
  35.             </el-table-column>
  36.             <el-table-column
  37.                     prop="address"
  38.                     label="地址">
  39.             </el-table-column>
  40.         </el-table>
  41.     </template>
  42. </div>
  43. </body>
  44. <script>
  45.     new Vue({
  46.         el: '#app',
  47.         data() {
  48.             return {
  49.                 tableData: [{
  50.                     date: '2016-05-02',
  51.                     name: '王小虎',
  52.                     address: '上海市普陀区金沙江路 1518 弄'
  53.                 }, {
  54.                     date: '2016-05-04',
  55.                     name: '王小虎',
  56.                     address: '上海市普陀区金沙江路 1517 弄'
  57.                 }, {
  58.                     date: '2016-05-01',
  59.                     name: '王小虎',
  60.                     address: '上海市普陀区金沙江路 1519 弄'
  61.                 }, {
  62.                     date: '2016-05-03',
  63.                     name: '王小虎',
  64.                     address: '上海市普陀区金沙江路 1516 弄'
  65.                 }]
  66.             }
  67.         }
  68.     })
  69. </script>
  70. ​
  71. </html>

(2).Tag 标签

用于标记和选择。

见官网：https://element.eleme.cn/#/zh-CN/component/tag

(3).Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

见官网：https://element.eleme.cn/#/zh-CN/component/progress

(4).Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

见官网：https://element.eleme.cn/#/zh-CN/component/tree

(5).Pagination 分页

当数据量过多时，使用分页分解数据。

见官网：https://element.eleme.cn/#/zh-CN/component/pagination

(6).Badge 标记

出现在按钮、图标旁的数字或状态标记。

见官网：https://element.eleme.cn/#/zh-CN/component/badge

4.Notice组件

(1).Alert 警告

用于页面中展示重要的提示信息。

更多样式见官网：https://element.eleme.cn/#/zh-CN/component/alert

基本用法

页面中的非浮层元素，不会自动消失。

Alert 组件提供四种主题，由type属性指定，默认值为info。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Layout 布局-基础布局</title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .el-form {
  16.         width: 400px;
  17.     }
  18. </style>
  19. ​
  20. <body>
  21. <div id="app">
  22.     <template>
  23.         <el-alert
  24.                 title="成功提示的文案"
  25.                 type="success">
  26.         </el-alert>
  27.         <el-alert
  28.                 title="消息提示的文案"
  29.                 type="info">
  30.         </el-alert>
  31.         <el-alert
  32.                 title="警告提示的文案"
  33.                 type="warning">
  34.         </el-alert>
  35.         <el-alert
  36.                 title="错误提示的文案"
  37.                 type="error">
  38.         </el-alert>
  39.     </template>
  40. </div>
  41. </body>
  42. <script>
  43.     new Vue({
  44.         el: '#app'
  45.     })
  46. </script>
  47. ​
  48. </html>

(2).Loading 加载

加载数据时显示动效。

更多见官网：https://element.eleme.cn/#/zh-CN/component/loading

(3).Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

更多见官网：https://element.eleme.cn/#/zh-CN/component/message

(4).MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

更多见官网：https://element.eleme.cn/#/zh-CN/component/message-box

调用$alert方法即可打开消息提示，它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，message和title。值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .el-form {
  16.         width: 400px;
  17.     }
  18. </style>
  19. ​
  20. <body>
  21. <div id="app">
  22.     <template>
  23.         <el-button type="text" @click="open">点击打开 Message Box</el-button>
  24.     </template>
  25. </div>
  26. </body>
  27. <script>
  28.     new Vue({
  29.         el: '#app',
  30.         methods: {
  31.             open() {
  32.                 this.$alert('这是一段内容', '标题名称', {
  33.                     confirmButtonText: '确定',
  34.                     callback: action => {
  35.                         this.$message({
  36.                             type: 'info',
  37.                             message: `action: ${ action }`
  38.                         });
  39.                     }
  40.                 });
  41.             }
  42.         }
  43.     })
  44. </script>
  45. ​
  46. </html>

(5).Notification 通知

悬浮出现在页面角落，显示全局的通知提醒消息。

更多见官网：https://element.eleme.cn/#/zh-CN/component/notification

5.Navigation组件

(1).NavMenu 导航菜单

为网站提供导航功能的菜单。

更多见官网：https://element.eleme.cn/#/zh-CN/component/menu

a.顶栏

适用广泛的基础用法。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .el-menu-demo{
  16.         width: 500px;
  17.     }
  18. ​
  19. </style>
  20. ​
  21. <body>
  22. <div id="app">
  23.     <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  24.         <el-menu-item index="1">处理中心</el-menu-item>
  25.         <el-submenu index="2">
  26.             <template slot="title">我的工作台</template>
  27.             <el-menu-item index="2-1">选项1</el-menu-item>
  28.             <el-menu-item index="2-2">选项2</el-menu-item>
  29.             <el-menu-item index="2-3">选项3</el-menu-item>
  30.             <el-submenu index="2-4">
  31.                 <template slot="title">选项4</template>
  32.                 <el-menu-item index="2-4-1">选项1</el-menu-item>
  33.                 <el-menu-item index="2-4-2">选项2</el-menu-item>
  34.                 <el-menu-item index="2-4-3">选项3</el-menu-item>
  35.             </el-submenu>
  36.         </el-submenu>
  37.         <el-menu-item index="3" disabled>消息中心</el-menu-item>
  38.         <el-menu-item index="4"><a href="" target="_blank">订单管理</a></el-menu-item>
  39.     </el-menu>
  40.     <div class="line"></div>
  41.     <el-menu
  42.             :default-active="activeIndex2"
  43.             class="el-menu-demo"
  44.             mode="horizontal"
  45.             @select="handleSelect"
  46.             background-color="#545c64"
  47.             text-color="#fff"
  48.             active-text-color="#ffd04b">
  49.         <el-menu-item index="1">处理中心</el-menu-item>
  50.         <el-submenu index="2">
  51.             <template slot="title">我的工作台</template>
  52.             <el-menu-item index="2-1">选项1</el-menu-item>
  53.             <el-menu-item index="2-2">选项2</el-menu-item>
  54.             <el-menu-item index="2-3">选项3</el-menu-item>
  55.             <el-submenu index="2-4">
  56.                 <template slot="title">选项4</template>
  57.                 <el-menu-item index="2-4-1">选项1</el-menu-item>
  58.                 <el-menu-item index="2-4-2">选项2</el-menu-item>
  59.                 <el-menu-item index="2-4-3">选项3</el-menu-item>
  60.             </el-submenu>
  61.         </el-submenu>
  62.         <el-menu-item index="3" disabled>消息中心</el-menu-item>
  63.         <el-menu-item index="4"><a href="" target="_blank">订单管理</a></el-menu-item>
  64.     </el-menu>
  65. </div>
  66. </body>
  67. <script>
  68.     new Vue({
  69.         el: '#app',
  70.         data() {
  71.             return {
  72.                 activeIndex: '1',
  73.                 activeIndex2: '1'
  74.             };
  75.         },
  76.         methods: {
  77.             handleSelect(key, keyPath) {
  78.                 console.log(key, keyPath);
  79.             }
  80.         }
  81.     })
  82. </script>
  83. ​
  84. </html>

b.侧栏

垂直菜单，可内嵌子菜单。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .tac{
  16.         width: 500px;
  17.     }
  18. ​
  19. </style>
  20. ​
  21. <body>
  22. <div id="app">
  23.     <el-row class="tac">
  24.         <el-col :span="12">
  25.             <h5>默认颜色</h5>
  26.             <el-menu
  27.                     default-active="2"
  28.                     class="el-menu-vertical-demo"
  29.                     @open="handleOpen"
  30.                     @close="handleClose">
  31.                 <el-submenu index="1">
  32.                     <template slot="title">
  33.                         <i class="el-icon-location"></i>
  34.                         <span>导航一</span>
  35.                     </template>
  36.                     <el-menu-item-group>
  37.                         <template slot="title">分组一</template>
  38.                         <el-menu-item index="1-1">选项1</el-menu-item>
  39.                         <el-menu-item index="1-2">选项2</el-menu-item>
  40.                     </el-menu-item-group>
  41.                     <el-menu-item-group title="分组2">
  42.                         <el-menu-item index="1-3">选项3</el-menu-item>
  43.                     </el-menu-item-group>
  44.                     <el-submenu index="1-4">
  45.                         <template slot="title">选项4</template>
  46.                         <el-menu-item index="1-4-1">选项1</el-menu-item>
  47.                     </el-submenu>
  48.                 </el-submenu>
  49.                 <el-menu-item index="2">
  50.                     <i class="el-icon-menu"></i>
  51.                     <span slot="title">导航二</span>
  52.                 </el-menu-item>
  53.                 <el-menu-item index="3" disabled>
  54.                     <i class="el-icon-document"></i>
  55.                     <span slot="title">导航三</span>
  56.                 </el-menu-item>
  57.                 <el-menu-item index="4">
  58.                     <i class="el-icon-setting"></i>
  59.                     <span slot="title">导航四</span>
  60.                 </el-menu-item>
  61.             </el-menu>
  62.         </el-col>
  63.         <el-col :span="12">
  64.             <h5>自定义颜色</h5>
  65.             <el-menu
  66.                     default-active="2"
  67.                     class="el-menu-vertical-demo"
  68.                     @open="handleOpen"
  69.                     @close="handleClose"
  70.                     background-color="#545c64"
  71.                     text-color="#fff"
  72.                     active-text-color="#ffd04b">
  73.                 <el-submenu index="1">
  74.                     <template slot="title">
  75.                         <i class="el-icon-location"></i>
  76.                         <span>导航一</span>
  77.                     </template>
  78.                     <el-menu-item-group>
  79.                         <template slot="title">分组一</template>
  80.                         <el-menu-item index="1-1">选项1</el-menu-item>
  81.                         <el-menu-item index="1-2">选项2</el-menu-item>
  82.                     </el-menu-item-group>
  83.                     <el-menu-item-group title="分组2">
  84.                         <el-menu-item index="1-3">选项3</el-menu-item>
  85.                     </el-menu-item-group>
  86.                     <el-submenu index="1-4">
  87.                         <template slot="title">选项4</template>
  88.                         <el-menu-item index="1-4-1">选项1</el-menu-item>
  89.                     </el-submenu>
  90.                 </el-submenu>
  91.                 <el-menu-item index="2">
  92.                     <i class="el-icon-menu"></i>
  93.                     <span slot="title">导航二</span>
  94.                 </el-menu-item>
  95.                 <el-menu-item index="3" disabled>
  96.                     <i class="el-icon-document"></i>
  97.                     <span slot="title">导航三</span>
  98.                 </el-menu-item>
  99.                 <el-menu-item index="4">
  100.                     <i class="el-icon-setting"></i>
  101.                     <span slot="title">导航四</span>
  102.                 </el-menu-item>
  103.             </el-menu>
  104.         </el-col>
  105.     </el-row>
  106. </div>
  107. </body>
  108. <script>
  109.     new Vue({
  110.         el: '#app',
  111.         methods: {
  112.             handleOpen(key, keyPath) {
  113.                 console.log(key, keyPath);
  114.             },
  115.             handleClose(key, keyPath) {
  116.                 console.log(key, keyPath);
  117.             }
  118.         }
  119.     })
  120. </script>
  121. </html>

(2).Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

更多见官网：https://element.eleme.cn/#/zh-CN/component/tabs

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .tac{
  16.         width: 500px;
  17.     }
  18. ​
  19. </style>
  20. ​
  21. <body>
  22. <div id="app">
  23.     <template>
  24.         <el-tabs v-model="activeName" @tab-click="handleClick" class="tac">
  25.             <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  26.             <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  27.             <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  28.             <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  29.         </el-tabs>
  30.     </template>
  31. </div>
  32. </body>
  33. <script>
  34.     new Vue({
  35.         el: '#app',
  36.         data() {
  37.             return {
  38.                 activeName: 'second'
  39.             };
  40.         },
  41.         methods: {
  42.             handleClick(tab, event) {
  43.                 console.log(tab, event);
  44.             }
  45.         }
  46.     })
  47. </script>
  48. ​
  49. </html>

(3).Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

更多见官网：https://element.eleme.cn/#/zh-CN/component/breadcrumb

(4).PageHeader 页头

如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。

更多见官网：https://element.eleme.cn/#/zh-CN/component/page-header

(5).Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

更多见官网：https://element.eleme.cn/#/zh-CN/component/dropdown

基础用法

移动到下拉菜单上，展开更多操作。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .el-dropdown-link {
  16.         cursor: pointer;
  17.         color: #409EFF;
  18.     }
  19.     .el-icon-arrow-down {
  20.         font-size: 12px;
  21.     }
  22. </style>
  23. ​
  24. <body>
  25. <div id="app">
  26.     <el-dropdown>
  27.       <span class="el-dropdown-link">
  28.         下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  29.       </span>
  30.         <el-dropdown-menu slot="dropdown">
  31.             <el-dropdown-item>黄金糕</el-dropdown-item>
  32.             <el-dropdown-item>狮子头</el-dropdown-item>
  33.             <el-dropdown-item>螺蛳粉</el-dropdown-item>
  34.             <el-dropdown-item disabled>双皮奶</el-dropdown-item>
  35.             <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  36.         </el-dropdown-menu>
  37.     </el-dropdown>
  38. </div>
  39. </body>
  40. <script>
  41.     new Vue({
  42.         el: '#app'
  43.     })
  44. </script>
  45. ​
  46. </html>

(6).Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

更多见官网：https://element.eleme.cn/#/zh-CN/component/steps

基础用法

简单的步骤条。

设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Boolean，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .step{
  16.         width: 500px;
  17.     }
  18. </style>
  19. ​
  20. <body>
  21. <div id="app">
  22.     <el-steps :active="active" finish-status="success" class="step">
  23.         <el-step title="步骤 1"></el-step>
  24.         <el-step title="步骤 2"></el-step>
  25.         <el-step title="步骤 3"></el-step>
  26.     </el-steps>
  27.     <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  28. ​
  29. </div>
  30. </body>
  31. <script>
  32.     new Vue({
  33.         el: '#app',
  34.         data() {
  35.             return {
  36.                 active: 0
  37.             };
  38.         },
  39. ​
  40.         methods: {
  41.             next() {
  42.                 if (this.active++ > 2) this.active = 0;
  43.             }
  44.         }
  45.     })
  46. </script>
  47. </html>

6.其他组件

(1).Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

更多可见官网：https://element.eleme.cn/#/zh-CN/component/dialog

基本用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .step{
  16.         width: 500px;
  17.     }
  18. </style>
  19. ​
  20. <body>
  21. <div id="app">
  22.     <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
  23. ​
  24.     <el-dialog
  25.             title="提示"
  26.             :visible.sync="dialogVisible"
  27.             width="30%"
  28.             :before-close="handleClose">
  29.         <span>这是一段信息</span>
  30.         <span slot="footer" class="dialog-footer">
  31.     <el-button @click="dialogVisible = false">取 消</el-button>
  32.     <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  33.   </span>
  34.     </el-dialog>
  35. </div>
  36. </body>
  37. <script>
  38.     new Vue({
  39.         el: '#app',
  40.         data() {
  41.             return {
  42.                 dialogVisible: false
  43.             };
  44.         },
  45.         methods: {
  46.             handleClose(done) {
  47.                 this.$confirm('确认关闭？')
  48.                     .then(_ => {
  49.                         done();
  50.                     })
  51.                     .catch(_ => {});
  52.             }
  53.         }
  54.     })
  55. </script>
  56. ​
  57. </html>

(2).Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

更多可见官网：https://element.eleme.cn/#/zh-CN/component/tooltip

基础用法

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .box {
  16.         width: 400px;
  17. ​
  18.     .top {
  19.         text-align: center;
  20.     }
  21. ​
  22.     .left {
  23.         float: left;
  24.         width: 60px;
  25.     }
  26. ​
  27.     .right {
  28.         float: right;
  29.         width: 60px;
  30.     }
  31. ​
  32.     .bottom {
  33.         clear: both;
  34.         text-align: center;
  35.     }
  36. ​
  37.     .item {
  38.         margin: 4px;
  39.     }
  40. ​
  41.     .left .el-tooltip__popper,
  42.     .right .el-tooltip__popper {
  43.         padding: 8px 10px;
  44.     }
  45.     }
  46. </style>
  47. ​
  48. <body>
  49. <div id="app">
  50.     <div class="box">
  51.         <br><br><br><br><br>
  52.         <div class="top">
  53.             <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
  54.                 <el-button>上左</el-button>
  55.             </el-tooltip>
  56.             <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
  57.                 <el-button>上边</el-button>
  58.             </el-tooltip>
  59.             <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
  60.                 <el-button>上右</el-button>
  61.             </el-tooltip>
  62.         </div>
  63.         <br><br><br><br><br>
  64.         <div class="left">
  65.             <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
  66.                 <el-button>左上</el-button>
  67.             </el-tooltip>
  68.             <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
  69.                 <el-button>左边</el-button>
  70.             </el-tooltip>
  71.             <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
  72.                 <el-button>左下</el-button>
  73.             </el-tooltip>
  74.         </div>
  75.         <br><br><br><br><br>
  76.         <div class="right">
  77.             <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
  78.                 <el-button>右上</el-button>
  79.             </el-tooltip>
  80.             <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
  81.                 <el-button>右边</el-button>
  82.             </el-tooltip>
  83.             <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
  84.                 <el-button>右下</el-button>
  85.             </el-tooltip>
  86.         </div>
  87.         <br><br><br><br><br>
  88.         <div class="bottom">
  89.             <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
  90.                 <el-button>下左</el-button>
  91.             </el-tooltip>
  92.             <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
  93.                 <el-button>下边</el-button>
  94.             </el-tooltip>
  95.             <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
  96.                 <el-button>下右</el-button>
  97.             </el-tooltip>
  98.         </div>
  99.     </div>
  100. </div>
  101. </body>
  102. <script>
  103.     new Vue({
  104.         el: '#app'
  105.     })
  106. </script>
  107. ​
  108. </html>

(3).Popover 弹出框

基础用法

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。

更多可见官网：https://element.eleme.cn/#/zh-CN/component/popover

trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.    
  16. </style>
  17. ​
  18. <body>
  19. <div id="app">
  20.     <template>
  21.         <el-popover
  22.                 placement="top-start"
  23.                 title="标题"
  24.                 width="200"
  25.                 trigger="hover"
  26.                 content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  27.             <el-button slot="reference">hover 激活</el-button>
  28.         </el-popover>
  29. ​
  30.         <el-popover
  31.                 placement="bottom"
  32.                 title="标题"
  33.                 width="200"
  34.                 trigger="click"
  35.                 content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  36.             <el-button slot="reference">click 激活</el-button>
  37.         </el-popover>
  38. ​
  39.         <el-popover
  40.                 ref="popover"
  41.                 placement="right"
  42.                 title="标题"
  43.                 width="200"
  44.                 trigger="focus"
  45.                 content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  46.         </el-popover>
  47.         <el-button v-popover:popover>focus 激活</el-button>
  48. ​
  49.         <el-popover
  50.                 placement="bottom"
  51.                 title="标题"
  52.                 width="200"
  53.                 trigger="manual"
  54.                 content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
  55.                 v-model="visible">
  56.             <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
  57.         </el-popover>
  58.     </template>
  59. </div>
  60. </body>
  61. <script>
  62.     new Vue({
  63.         el: '#app',
  64.         data() {
  65.             return {
  66.                 visible: false
  67.             };
  68.         }
  69.     })
  70. </script>
  71. ​
  72. </html>

(4).Card 卡片

将信息聚合在卡片容器中展示。

更多可见官网：https://element.eleme.cn/#/zh-CN/component/card

(5).Carousel 走马灯(轮播图)

在有限空间内，循环播放同一类型的图片、文字等内容

更多可见官网：https://element.eleme.cn/#/zh-CN/component/carousel

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.     .el-carousel__item h3 {
  16.         color: #475669;
  17.         font-size: 14px;
  18.         opacity: 0.75;
  19.         line-height: 150px;
  20.         margin: 0;
  21.     }
  22. ​
  23.     .el-carousel__item:nth-child(2n) {
  24.         background-color: #99a9bf;
  25.     }
  26. ​
  27.     .el-carousel__item:nth-child(2n+1) {
  28.         background-color: #d3dce6;
  29.     }
  30. </style>
  31. ​
  32. <body>
  33. <div id="app">
  34.     <template>
  35.         <div class="block">
  36.             <span class="demonstration">默认 Hover 指示器触发</span>
  37.             <el-carousel height="150px">
  38.                 <el-carousel-item v-for="item in 4" :key="item">
  39.                     <h3 class="small">{{ item }}</h3>
  40.                 </el-carousel-item>
  41.             </el-carousel>
  42.         </div>
  43.         <div class="block">
  44.             <span class="demonstration">Click 指示器触发</span>
  45.             <el-carousel trigger="click" height="150px">
  46.                 <el-carousel-item v-for="item in 4" :key="item">
  47.                     <h3 class="small">{{ item }}</h3>
  48.                 </el-carousel-item>
  49.             </el-carousel>
  50.         </div>
  51.     </template>
  52. </div>
  53. </body>
  54. <script>
  55.     new Vue({
  56.         el: '#app'
  57.     })
  58. </script>
  59. ​
  60. </html>

(6).Collapse 折叠面板

通过折叠面板收纳内容区域

更多可见官网：https://element.eleme.cn/#/zh-CN/component/collapse

(7).Timeline 时间线

可视化地呈现时间流信息。

更多可见官网：https://element.eleme.cn/#/zh-CN/component/timeline

基础用法

Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15.    
  16. </style>
  17. ​
  18. <body>
  19. <div id="app">
  20.     <div class="block">
  21.         <div class="radio">
  22.             排序：
  23.             <el-radio-group v-model="reverse">
  24.                 <el-radio :label="true">倒序</el-radio>
  25.                 <el-radio :label="false">正序</el-radio>
  26.             </el-radio-group>
  27.         </div>
  28. ​
  29.         <el-timeline :reverse="reverse">
  30.             <el-timeline-item
  31.                     v-for="(activity, index) in activities"
  32.                     :key="index"
  33.                     :timestamp="activity.timestamp">
  34.                 {{activity.content}}
  35.             </el-timeline-item>
  36.         </el-timeline>
  37.     </div>
  38. ​
  39. </div>
  40. </body>
  41. <script>
  42.     new Vue({
  43.         el: '#app',
  44.         data() {
  45.             return {
  46.                 reverse: true,
  47.                 activities: [{
  48.                     content: '活动按期开始',
  49.                     timestamp: '2018-04-15'
  50.                 }, {
  51.                     content: '通过审核',
  52.                     timestamp: '2018-04-13'
  53.                 }, {
  54.                     content: '创建成功',
  55.                     timestamp: '2018-04-11'
  56.                 }]
  57.             };
  58.         }
  59.     })
  60. </script>
  61. ​
  62. </html>

(8).Divider 分割线

区隔内容的分割线。

更多可见官网：https://element.eleme.cn/#/zh-CN/component/divider

(9).Calendar calendar

显示日期

更多可见官网：https://element.eleme.cn/#/zh-CN/component/calendar

(10).Image 图片

图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等

更多可见官网：https://element.eleme.cn/#/zh-CN/component/image

基础用法

可通过fit确定图片如何适应到容器框，同原生 object-fit。

  1. <!DOCTYPE html>
  2. <html>
  3. ​
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  9.     <!-- 导入Vue -->
  10.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  11.     <!-- 引入组件库 -->
  12.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13. </head>
  14. <style>
  15. ​
  16. </style>
  17. ​
  18. <body>
  19. <div id="app">
  20.     <div class="demo-image">
  21.         <div class="block" v-for="fit in fits" :key="fit">
  22.             <span class="demonstration">{{ fit }}</span>
  23.             <el-image
  24.                     style="width: 100px; height: 100px"
  25.                     :src="url"
  26.                     :fit="fit"></el-image>
  27.         </div>
  28.     </div>
  29. </div>
  30. </body>
  31. <script>
  32.     new Vue({
  33.         el: '#app',
  34.         data() {
  35.             return {
  36.                 fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
  37.                 url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  38.             }
  39.         }
  40.     })
  41. </script>
  42. ​
  43. </html>

(11).Backtop 回到顶部

返回页面顶部的操作按钮

更多可见官网：https://element.eleme.cn/#/zh-CN/component/backtop

(12).InfiniteScroll 无限滚动

滚动至底部时，加载更多数据。

更多可见官网：https://element.eleme.cn/#/zh-CN/component/infiniteScroll

=========================【完】=========================

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/97439
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号