当前位置:   article > 正文

Element概述、入门案例及布局_element 布局

element 布局

目录

一、Element概述

二、Element入门案例

三、Element布局

Layout布局:

Container布局容器:


一、Element概述

Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库,用于快捷构建网页

组件:组成网页的部件,例如 超链接、按钮、图片、表格等等~

官网:组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation

二、Element入门案例

1、引入Element的css、js文件和Vue.js

  1. <script src="js/vue.js"></script>
  2. <script src="element-ui/lib/index.js"></script>
  3. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、创建Vue核心对象

  1. <script>
  2. new Vue({
  3. el: "#app"
  4. })
  5. </script>

3、官网复制Element组件代码

Element按钮代码示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <el-row>
  10. <el-button>默认按钮</el-button>
  11. <el-button type="primary">主要按钮</el-button>
  12. <el-button type="success">成功按钮</el-button>
  13. <el-button type="info">信息按钮</el-button>
  14. <el-button type="warning">警告按钮</el-button>
  15. <el-button type="danger">危险按钮</el-button>
  16. </el-row>
  17. <el-row>
  18. <el-button plain>朴素按钮</el-button>
  19. <el-button type="primary" plain>主要按钮</el-button>
  20. <el-button type="success" plain>成功按钮</el-button>
  21. <el-button type="info" plain>信息按钮</el-button>
  22. <el-button type="warning" plain>警告按钮</el-button>
  23. <el-button type="danger" plain>危险按钮</el-button>
  24. </el-row>
  25. <el-row>
  26. <el-button round>圆角按钮</el-button>
  27. <el-button type="primary" round>主要按钮</el-button>
  28. <el-button type="success" round>成功按钮</el-button>
  29. <el-button type="info" round>信息按钮</el-button>
  30. <el-button type="warning" round>警告按钮</el-button>
  31. <el-button type="danger" round>危险按钮</el-button>
  32. </el-row>
  33. <el-row>
  34. <el-button icon="el-icon-search" circle></el-button>
  35. <el-button type="primary" icon="el-icon-edit" circle></el-button>
  36. <el-button type="success" icon="el-icon-check" circle></el-button>
  37. <el-button type="info" icon="el-icon-message" circle></el-button>
  38. <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  39. <el-button type="danger" icon="el-icon-delete" circle></el-button>
  40. </el-row>
  41. </div>
  42. <script src="js/vue.js"></script>
  43. <script src="element-ui/lib/index.js"></script>
  44. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  45. <script>
  46. new Vue({
  47. el: "#app"
  48. })
  49. </script>
  50. </body>
  51. </html>

执行结果:

 三、Element布局

Element中有两种布局方式:

Layout布局:

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

Layout布局代码示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .el-row {
  8. margin-bottom: 20px;
  9. }
  10. .el-col {
  11. border-radius: 4px;
  12. }
  13. .bg-purple-dark {
  14. background: #99a9bf;
  15. }
  16. .bg-purple {
  17. background: #d3dce6;
  18. }
  19. .bg-purple-light {
  20. background: #e5e9f2;
  21. }
  22. .grid-content {
  23. border-radius: 4px;
  24. min-height: 36px;
  25. }
  26. .row-bg {
  27. padding: 10px 0;
  28. background-color: #f9fafc;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="app">
  34. <el-row>
  35. <el-col :span="24">
  36. <div class="grid-content bg-purple-dark"></div>
  37. </el-col>
  38. </el-row>
  39. <el-row>
  40. <el-col :span="12">
  41. <div class="grid-content bg-purple"></div>
  42. </el-col>
  43. <el-col :span="12">
  44. <div class="grid-content bg-purple-light"></div>
  45. </el-col>
  46. </el-row>
  47. <el-row>
  48. <el-col :span="8">
  49. <div class="grid-content bg-purple"></div>
  50. </el-col>
  51. <el-col :span="8">
  52. <div class="grid-content bg-purple-light"></div>
  53. </el-col>
  54. <el-col :span="8">
  55. <div class="grid-content bg-purple"></div>
  56. </el-col>
  57. </el-row>
  58. <el-row>
  59. <el-col :span="6">
  60. <div class="grid-content bg-purple"></div>
  61. </el-col>
  62. <el-col :span="6">
  63. <div class="grid-content bg-purple-light"></div>
  64. </el-col>
  65. <el-col :span="6">
  66. <div class="grid-content bg-purple"></div>
  67. </el-col>
  68. <el-col :span="6">
  69. <div class="grid-content bg-purple-light"></div>
  70. </el-col>
  71. </el-row>
  72. <el-row>
  73. <el-col :span="4">
  74. <div class="grid-content bg-purple"></div>
  75. </el-col>
  76. <el-col :span="4">
  77. <div class="grid-content bg-purple-light"></div>
  78. </el-col>
  79. <el-col :span="4">
  80. <div class="grid-content bg-purple"></div>
  81. </el-col>
  82. <el-col :span="4">
  83. <div class="grid-content bg-purple-light"></div>
  84. </el-col>
  85. <el-col :span="4">
  86. <div class="grid-content bg-purple"></div>
  87. </el-col>
  88. <el-col :span="4">
  89. <div class="grid-content bg-purple-light"></div>
  90. </el-col>
  91. </el-row>
  92. </div>
  93. <script src="js/vue.js"></script>
  94. <script src="element-ui/lib/index.js"></script>
  95. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  96. <script>
  97. new Vue({
  98. el: "#app"
  99. })
  100. </script>
  101. </body>
  102. </html>

执行结果:

Container布局容器:

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

Container布局容器代码示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .el-header {
  8. background-color: #B3C0D1;
  9. color: #333;
  10. line-height: 60px;
  11. }
  12. .el-aside {
  13. color: #333;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="app">
  19. <el-container style="height: 500px; border: 1px solid #eee">
  20. <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
  21. <el-menu :default-openeds="['1', '3']">
  22. <el-submenu index="1">
  23. <template slot="title"><i class="el-icon-message"></i>导航一</template>
  24. <el-menu-item-group>
  25. <template slot="title">分组一</template>
  26. <el-menu-item index="1-1">选项1</el-menu-item>
  27. <el-menu-item index="1-2">选项2</el-menu-item>
  28. </el-menu-item-group>
  29. <el-menu-item-group title="分组2">
  30. <el-menu-item index="1-3">选项3</el-menu-item>
  31. </el-menu-item-group>
  32. <el-submenu index="1-4">
  33. <template slot="title">选项4</template>
  34. <el-menu-item index="1-4-1">选项4-1</el-menu-item>
  35. </el-submenu>
  36. </el-submenu>
  37. <el-submenu index="2">
  38. <template slot="title"><i class="el-icon-menu"></i>导航二</template>
  39. <el-menu-item-group>
  40. <template slot="title">分组一</template>
  41. <el-menu-item index="2-1">选项1</el-menu-item>
  42. <el-menu-item index="2-2">选项2</el-menu-item>
  43. </el-menu-item-group>
  44. <el-menu-item-group title="分组2">
  45. <el-menu-item index="2-3">选项3</el-menu-item>
  46. </el-menu-item-group>
  47. <el-submenu index="2-4">
  48. <template slot="title">选项4</template>
  49. <el-menu-item index="2-4-1">选项4-1</el-menu-item>
  50. </el-submenu>
  51. </el-submenu>
  52. <el-submenu index="3">
  53. <template slot="title"><i class="el-icon-setting"></i>导航三</template>
  54. <el-menu-item-group>
  55. <template slot="title">分组一</template>
  56. <el-menu-item index="3-1">选项1</el-menu-item>
  57. <el-menu-item index="3-2">选项2</el-menu-item>
  58. </el-menu-item-group>
  59. <el-menu-item-group title="分组2">
  60. <el-menu-item index="3-3">选项3</el-menu-item>
  61. </el-menu-item-group>
  62. <el-submenu index="3-4">
  63. <template slot="title">选项4</template>
  64. <el-menu-item index="3-4-1">选项4-1</el-menu-item>
  65. </el-submenu>
  66. </el-submenu>
  67. </el-menu>
  68. </el-aside>
  69. <el-container>
  70. <el-header style="text-align: right; font-size: 12px">
  71. <el-dropdown>
  72. <i class="el-icon-setting" style="margin-right: 15px"></i>
  73. <el-dropdown-menu slot="dropdown">
  74. <el-dropdown-item>查看</el-dropdown-item>
  75. <el-dropdown-item>新增</el-dropdown-item>
  76. <el-dropdown-item>删除</el-dropdown-item>
  77. </el-dropdown-menu>
  78. </el-dropdown>
  79. <span>王小虎</span>
  80. </el-header>
  81. <el-main>
  82. <el-table :data="tableData">
  83. <el-table-column prop="date" label="日期" width="140">
  84. </el-table-column>
  85. <el-table-column prop="name" label="姓名" width="120">
  86. </el-table-column>
  87. <el-table-column prop="address" label="地址">
  88. </el-table-column>
  89. </el-table>
  90. </el-main>
  91. </el-container>
  92. </el-container>
  93. </div>
  94. <script src="js/vue.js"></script>
  95. <script src="element-ui/lib/index.js"></script>
  96. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  97. <script>
  98. new Vue({
  99. el: "#app",
  100. data() {
  101. const item = {
  102. date: '2016-05-02',
  103. name: '王小虎',
  104. address: '上海市普陀区金沙江路 1518 弄'
  105. };
  106. return {
  107. tableData: Array(20).fill(item)
  108. }
  109. }
  110. })
  111. </script>
  112. </body>
  113. </html>

执行结果:

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

闽ICP备14008679号