Element 基本使用

3.1、Element介绍

  • Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
  • 使用Element前提必须要有Vue。
  • 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
  • Element官网：https://element.eleme.cn/#/zh-CN
  • 自己完成的按钮
    我是按钮.png
  • Element 提供的按钮
    element提供的按钮.png

3.2、Element快速入门

  • 开发步骤
    1. 下载 Element 核心库。
    2. 引入 Element 样式文件。
    3. 引入 Vue 核心 js 文件。
    4. 引入 Element 核心 js 文件。
    5. 编写按钮标签。
    6. 通过 Vue 核心对象加载元素。
  • 代码实现 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.  <title>快速入门</title>
    7.  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    8.  <script src="js/vue.js"></script>
    9.  <script src="element-ui/lib/index.js"></script>
    10. </head>
    11. <body>
    12.  <button>我是按钮</button>
    13.  <br>
    14.  <div id="div">
    15.      <el-row>
    16.          <el-button>默认按钮</el-button>
    17.          <el-button type="primary">主要按钮</el-button>
    18.          <el-button type="success">成功按钮</el-button>
    19.          <el-button type="info">信息按钮</el-button>
    20.          <el-button type="warning">警告按钮</el-button>
    21.          <el-button type="danger">危险按钮</el-button>
    22.        </el-row>
    23.        <br>
    24.        <el-row>
    25.          <el-button plain>朴素按钮</el-button>
    26.          <el-button type="primary" plain>主要按钮</el-button>
    27.          <el-button type="success" plain>成功按钮</el-button>
    28.          <el-button type="info" plain>信息按钮</el-button>
    29.          <el-button type="warning" plain>警告按钮</el-button>
    30.          <el-button type="danger" plain>危险按钮</el-button>
    31.        </el-row>
    32.        <br>
    33.        <el-row>
    34.          <el-button round>圆角按钮</el-button>
    35.          <el-button type="primary" round>主要按钮</el-button>
    36.          <el-button type="success" round>成功按钮</el-button>
    37.          <el-button type="info" round>信息按钮</el-button>
    38.          <el-button type="warning" round>警告按钮</el-button>
    39.          <el-button type="danger" round>危险按钮</el-button>
    40.        </el-row>
    41.        <br>
    42.        <el-row>
    43.          <el-button icon="el-icon-search" circle></el-button>
    44.          <el-button type="primary" icon="el-icon-edit" circle></el-button>
    45.          <el-button type="success" icon="el-icon-check" circle></el-button>
    46.          <el-button type="info" icon="el-icon-message" circle></el-button>
    47.          <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    48.          <el-button type="danger" icon="el-icon-delete" circle></el-button>
    49.        </el-row>
    50.  </div>
    51. </body>
    52. <script>
    53.  new Vue({
    54.      el:"#div"
    55.  });
    56. </script>
    57. </html>

3.3、基础布局

将页面分成最多 24 个部分，自由切分。

基础布局.png

  • 代码实现 
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>基础布局</title>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
 <style>
     .el-row {
         /* 行距为20px */
         margin-bottom: 20px;
     }
     .bg-purple-dark {
         background: red;
     }
     .bg-purple {
         background: blue;
     }
     .bg-purple-light {
         background: green;
     }
     .grid-content {
         /* 边框圆润度 */
         border-radius: 4px;
         /* 行高为36px */
         min-height: 36px;
     }
   </style>
</head>
<body>
 <div id="div">
     <el-row>
         <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
       </el-row>
       <el-row>
         <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
       </el-row>
       <el-row>
         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
       </el-row>
       <el-row>
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
       </el-row>
 </div>
</body>
<script>
 new Vue({
     el:"#div"
 });
</script>
</html>

3.4、容器布局

将页面分成头部区域、侧边栏区域、主区域、底部区域。

容器布局.png

  • 代码实现 
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>容器布局</title>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
 <style>
     .el-header, .el-footer {
         background-color: #d18e66;
         color: #333;
         text-align: center;
         height: 100px;
     }
     .el-aside {
         background-color: #55e658;
         color: #333;
         text-align: center;
         height: 580px;
     }
     .el-main {
         background-color: #5fb1f3;
         color: #333;
         text-align: center;
         height: 520px;
     }
 </style>
</head>
<body>
 <div id="div">
     <el-container>
         <el-header>头部区域</el-header>
         <el-container>
           <el-aside width="200px">侧边栏区域</el-aside>
           <el-container>
             <el-main>主区域</el-main>
             <el-footer>底部区域</el-footer>
           </el-container>
         </el-container>
       </el-container>
 </div>
</body>
<script>
 new Vue({
     el:"#div"
 });
</script>
</html>

3.5、表单组件

由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

  • 代码实现 
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>表单组件</title>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
</head>
<body>
 <div id="div">
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="活动名称" prop="name">
           <el-input v-model="ruleForm.name"></el-input>
         </el-form-item>
         <el-form-item label="活动区域" prop="region">
           <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
             <el-option label="区域一" value="shanghai"></el-option>
             <el-option label="区域二" value="beijing"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="活动时间" required>
           <el-col :span="11">
             <el-form-item prop="date1">
               <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
             </el-form-item>
           </el-col>
           <el-col class="line" :span="2">-</el-col>
           <el-col :span="11">
             <el-form-item prop="date2">
               <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
             </el-form-item>
           </el-col>
         </el-form-item>
         <el-form-item label="即时配送" prop="delivery">
           <el-switch v-model="ruleForm.delivery"></el-switch>
         </el-form-item>
         <el-form-item label="活动性质" prop="type">
           <el-checkbox-group v-model="ruleForm.type">
             <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
             <el-checkbox label="地推活动" name="type"></el-checkbox>
             <el-checkbox label="线下主题活动" name="type"></el-checkbox>
             <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
           </el-checkbox-group>
         </el-form-item>
         <el-form-item label="特殊资源" prop="resource">
           <el-radio-group v-model="ruleForm.resource">
             <el-radio label="线上品牌商赞助"></el-radio>
             <el-radio label="线下场地免费"></el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="活动形式" prop="desc">
           <el-input type="textarea" v-model="ruleForm.desc"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
           <el-button @click="resetForm('ruleForm')">重置</el-button>
         </el-form-item>
       </el-form>
 </div>
</body>
<script>
 new Vue({
     el:"#div",
     data:{
         ruleForm: {
             name: '',
             region: '',
             date1: '',
             date2: '',
             delivery: false,
             type: [],
             resource: '',
             desc: ''
             },
     rules: {
       name: [
         { required: true, message: '请输入活动名称', trigger: 'blur' },
         { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
       ],
       region: [
         { required: true, message: '请选择活动区域', trigger: 'change' }
       ],
       date1: [
         { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
       ],
       date2: [
         { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
       ],
       type: [
         { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
       ],
       resource: [
         { required: true, message: '请选择活动资源', trigger: 'change' }
       ],
       desc: [
         { required: true, message: '请填写活动形式', trigger: 'blur' }
       ]
     }
     },
     methods:{
         submitForm(formName) {
             this.$refs[formName].validate((valid) => {
             if (valid) {
                 alert('submit!');
             } else {
                 console.log('error submit!!');
                 return false;
             }
             });
         },
         resetForm(formName) {
             this.$refs[formName].resetFields();
         }
     }
 });
</script>
</html>

3.6、表格组件

用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。

  • 代码实现 

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>表格组件</title>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
</head>
<body>
 <div id="div">
     <template>
         <el-table
           :data="tableData"
           style="width: 100%">
           <el-table-column
             prop="date"
             label="日期"
             width="180">
           </el-table-column>
           <el-table-column
             prop="name"
             label="姓名"
             width="180">
           </el-table-column>
           <el-table-column
             prop="address"
             label="地址">
           </el-table-column>

           <el-table-column
             label="操作"
             width="180">
             <el-button type="warning">编辑</el-button>
             <el-button type="danger">删除</el-button>
           </el-table-column>
         </el-table>
       </template>
 </div>
</body>
<script>
 new Vue({
     el:"#div",
     data:{
         tableData: [{
             date: '2016-05-02',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1518 弄'
         }, {
             date: '2016-05-04',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1517 弄'
         }, {
             date: '2016-05-01',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1519 弄'
         }, {
             date: '2016-05-03',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1516 弄'
         }]
     }
 });
</script>
</html>

3.7、顶部导航栏组件

顶部导航栏.png

  • 代码实现 
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>顶部导航栏</title>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
</head>
<body>
 <div id="div">
   <el-menu
   :default-active="activeIndex2"
   class="el-menu-demo"
   mode="horizontal"
   @select="handleSelect"
   background-color="#545c64"
   text-color="#fff"
   active-text-color="#ffd04b">
   <el-menu-item index="1">处理中心</el-menu-item>
   <el-submenu index="2">
     <template slot="title">我的工作台</template>
     <el-menu-item index="2-1">选项1</el-menu-item>
     <el-menu-item index="2-2">选项2</el-menu-item>
     <el-menu-item index="2-3">选项3</el-menu-item>
     <el-submenu index="2-4">
       <template slot="title">选项4</template>
       <el-menu-item index="2-4-1">选项1</el-menu-item>
       <el-menu-item index="2-4-2">选项2</el-menu-item>
       <el-menu-item index="2-4-3">选项3</el-menu-item>
     </el-submenu>
   </el-submenu>
   <el-menu-item index="3" disabled>消息中心</el-menu-item>
   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
 </el-menu>
 </div>
</body>
<script>
 new Vue({
     el:"#div"
 });
</script>
</html>

3.8、侧边导航栏组件

侧边导航栏.png

  • 代码实现 
    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>侧边导航栏</title>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
</head>
<body>
 <div id="div">
   <el-col :span="6">
     <el-menu
       default-active="2"
       class="el-menu-vertical-demo"
       @open="handleOpen"
       @close="handleClose"
       background-color="#545c64"
       text-color="#fff"
       active-text-color="#ffd04b">
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-location"></i>
           <span>导航一</span>
         </template>
         <el-menu-item-group>
           <template slot="title">分组一</template>
           <el-menu-item index="1-1">选项1</el-menu-item>
           <el-menu-item index="1-2">选项2</el-menu-item>
         </el-menu-item-group>
         <el-menu-item-group title="分组2">
           <el-menu-item index="1-3">选项3</el-menu-item>
         </el-menu-item-group>
         <el-submenu index="1-4">
           <template slot="title">选项4</template>
           <el-menu-item index="1-4-1">选项1</el-menu-item>
         </el-submenu>
       </el-submenu>
       <el-menu-item index="2">
         <i class="el-icon-menu"></i>
         <span slot="title">导航二</span>
       </el-menu-item>
       <el-menu-item index="3" disabled>
         <i class="el-icon-document"></i>
         <span slot="title">导航三</span>
       </el-menu-item>
       <el-menu-item index="4">
         <i class="el-icon-setting"></i>
         <span slot="title">导航四</span>
       </el-menu-item>
     </el-menu>
   </el-col>
 </div>
</body>
<script>
 new Vue({
     el:"#div"
 });
</script>
</html>

3.9、小结

  • Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于Vue的桌面端组件库。
  • 使用Element前提必须要有Vue。
  • 使用步骤
    1.下载Element核心库。
    2.引入Element样式文件。
    3.引入Vue核心js文件。
    4.引入Element核心js文件。
    5.借助常用组件编写网页。
  • 常用组件
    网页基本组成部分，布局、按钮、表格、表单等等~~~
    常用组件不需要记住，只需要在Element官网中复制使用即可。