devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：煮酒与君饮 | 2024-08-10 17:00:20

赞

踩

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.  
  10.     <el-row>
  11.         <el-button>默认按钮</el-button>
  12.         <el-button type="primary">主要按钮</el-button>
  13.         <el-button type="success">成功按钮</el-button>
  14.         <el-button type="info">信息按钮</el-button>
  15.         <el-button type="warning">警告按钮</el-button>
  16.         <el-button type="danger">危险按钮</el-button>
  17.     </el-row>
  18.  
  19.     <el-row>
  20.         <el-button plain>朴素按钮</el-button>
  21.         <el-button type="primary" plain>主要按钮</el-button>
  22.         <el-button type="success" plain>成功按钮</el-button>
  23.         <el-button type="info" plain>信息按钮</el-button>
  24.         <el-button type="warning" plain>警告按钮</el-button>
  25.         <el-button type="danger" plain>危险按钮</el-button>
  26.     </el-row>
  27.  
  28.     <el-row>
  29.         <el-button round>圆角按钮</el-button>
  30.         <el-button type="primary" round>主要按钮</el-button>
  31.         <el-button type="success" round>成功按钮</el-button>
  32.         <el-button type="info" round>信息按钮</el-button>
  33.         <el-button type="warning" round>警告按钮</el-button>
  34.         <el-button type="danger" round>危险按钮</el-button>
  35.     </el-row>
  36.  
  37.     <el-row>
  38.         <el-button icon="el-icon-search" circle></el-button>
  39.         <el-button type="primary" icon="el-icon-edit" circle></el-button>
  40.         <el-button type="success" icon="el-icon-check" circle></el-button>
  41.         <el-button type="info" icon="el-icon-message" circle></el-button>
  42.         <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  43.         <el-button type="danger" icon="el-icon-delete" circle></el-button>
  44.     </el-row>
  45.     
  46. </div>
  47.  
  48.  
  49. <script src="js/vue.js"></script>
  50. <script src="element-ui/lib/index.js"></script>
  51. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  52.  
  53.  
  54. <script>
  55.     new Vue({
  56.         el: "#app"
  57.     })
  58. </script>
  59.  
  60. </body>
  61. </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.  
  7.     <style>
  8.         .el-row {
  9.             margin-bottom: 20px;
  10.         }
  11.         .el-col {
  12.             border-radius: 4px;
  13.         }
  14.  
  15.         .bg-purple-dark {
  16.             background: #99a9bf;
  17.         }
  18.  
  19.         .bg-purple {
  20.             background: #d3dce6;
  21.         }
  22.  
  23.         .bg-purple-light {
  24.             background: #e5e9f2;
  25.         }
  26.  
  27.         .grid-content {
  28.             border-radius: 4px;
  29.             min-height: 36px;
  30.         }
  31.  
  32.         .row-bg {
  33.             padding: 10px 0;
  34.             background-color: #f9fafc;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39. <div id="app">
  40.  
  41.     <el-row>
  42.         <el-col :span="24">
  43.             <div class="grid-content bg-purple-dark"></div>
  44.         </el-col>
  45.     </el-row>
  46.     <el-row>
  47.         <el-col :span="12">
  48.             <div class="grid-content bg-purple"></div>
  49.         </el-col>
  50.         <el-col :span="12">
  51.             <div class="grid-content bg-purple-light"></div>
  52.         </el-col>
  53.     </el-row>
  54.     <el-row>
  55.         <el-col :span="8">
  56.             <div class="grid-content bg-purple"></div>
  57.         </el-col>
  58.         <el-col :span="8">
  59.             <div class="grid-content bg-purple-light"></div>
  60.         </el-col>
  61.         <el-col :span="8">
  62.             <div class="grid-content bg-purple"></div>
  63.         </el-col>
  64.     </el-row>
  65.     <el-row>
  66.         <el-col :span="6">
  67.             <div class="grid-content bg-purple"></div>
  68.         </el-col>
  69.         <el-col :span="6">
  70.             <div class="grid-content bg-purple-light"></div>
  71.         </el-col>
  72.         <el-col :span="6">
  73.             <div class="grid-content bg-purple"></div>
  74.         </el-col>
  75.         <el-col :span="6">
  76.             <div class="grid-content bg-purple-light"></div>
  77.         </el-col>
  78.     </el-row>
  79.     <el-row>
  80.         <el-col :span="4">
  81.             <div class="grid-content bg-purple"></div>
  82.         </el-col>
  83.         <el-col :span="4">
  84.             <div class="grid-content bg-purple-light"></div>
  85.         </el-col>
  86.         <el-col :span="4">
  87.             <div class="grid-content bg-purple"></div>
  88.         </el-col>
  89.         <el-col :span="4">
  90.             <div class="grid-content bg-purple-light"></div>
  91.         </el-col>
  92.         <el-col :span="4">
  93.             <div class="grid-content bg-purple"></div>
  94.         </el-col>
  95.         <el-col :span="4">
  96.             <div class="grid-content bg-purple-light"></div>
  97.         </el-col>
  98.     </el-row>
  99.  
  100.  
  101. </div>
  102.  
  103.  
  104. <script src="js/vue.js"></script>
  105. <script src="element-ui/lib/index.js"></script>
  106. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  107.  
  108.  
  109. <script>
  110.     new Vue({
  111.         el: "#app"
  112.     })
  113.  
  114. </script>
  115.  
  116. </body>
  117. </html>

执行结果：

Container布局容器：

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

Container布局容器代码示例：

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

执行结果：

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

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

  

闽ICP备14008679号