赞
踩
目录
Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库,用于快捷构建网页
组件:组成网页的部件,例如 超链接、按钮、图片、表格等等~
官网:组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation
1、引入Element的css、js文件和Vue.js
- <script src="js/vue.js"></script>
- <script src="element-ui/lib/index.js"></script>
- <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
2、创建Vue核心对象
- <script>
- new Vue({
- el: "#app"
- })
- </script>
3、官网复制Element组件代码
Element按钮代码示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="app">
-
- <el-row>
- <el-button>默认按钮</el-button>
- <el-button type="primary">主要按钮</el-button>
- <el-button type="success">成功按钮</el-button>
- <el-button type="info">信息按钮</el-button>
- <el-button type="warning">警告按钮</el-button>
- <el-button type="danger">危险按钮</el-button>
- </el-row>
-
- <el-row>
- <el-button plain>朴素按钮</el-button>
- <el-button type="primary" plain>主要按钮</el-button>
- <el-button type="success" plain>成功按钮</el-button>
- <el-button type="info" plain>信息按钮</el-button>
- <el-button type="warning" plain>警告按钮</el-button>
- <el-button type="danger" plain>危险按钮</el-button>
- </el-row>
-
- <el-row>
- <el-button round>圆角按钮</el-button>
- <el-button type="primary" round>主要按钮</el-button>
- <el-button type="success" round>成功按钮</el-button>
- <el-button type="info" round>信息按钮</el-button>
- <el-button type="warning" round>警告按钮</el-button>
- <el-button type="danger" round>危险按钮</el-button>
- </el-row>
-
- <el-row>
- <el-button icon="el-icon-search" circle></el-button>
- <el-button type="primary" icon="el-icon-edit" circle></el-button>
- <el-button type="success" icon="el-icon-check" circle></el-button>
- <el-button type="info" icon="el-icon-message" circle></el-button>
- <el-button type="warning" icon="el-icon-star-off" circle></el-button>
- <el-button type="danger" icon="el-icon-delete" circle></el-button>
- </el-row>
-
- </div>
-
-
- <script src="js/vue.js"></script>
- <script src="element-ui/lib/index.js"></script>
- <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
-
-
- <script>
- new Vue({
- el: "#app"
- })
- </script>
-
- </body>
- </html>
执行结果:
Element中有两种布局方式:
通过基础的24分栏,迅速简便地创建布局
Layout布局代码示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
-
- <style>
- .el-row {
- margin-bottom: 20px;
- }
- .el-col {
- border-radius: 4px;
- }
-
- .bg-purple-dark {
- background: #99a9bf;
- }
-
- .bg-purple {
- background: #d3dce6;
- }
-
- .bg-purple-light {
- background: #e5e9f2;
- }
-
- .grid-content {
- border-radius: 4px;
- min-height: 36px;
- }
-
- .row-bg {
- padding: 10px 0;
- background-color: #f9fafc;
- }
- </style>
- </head>
- <body>
- <div id="app">
-
- <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>
-
-
- <script src="js/vue.js"></script>
- <script src="element-ui/lib/index.js"></script>
- <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
-
-
- <script>
- new Vue({
- el: "#app"
- })
-
- </script>
-
- </body>
- </html>
执行结果:
用于布局的容器组件,方便快速搭建页面的基础结构
Container布局容器代码示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
-
- <style>
- .el-header {
- background-color: #B3C0D1;
- color: #333;
- line-height: 60px;
- }
-
- .el-aside {
- color: #333;
- }
- </style>
-
- </head>
- <body>
- <div id="app">
-
- <el-container style="height: 500px; border: 1px solid #eee">
- <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
- <el-menu :default-openeds="['1', '3']">
- <el-submenu index="1">
- <template slot="title"><i class="el-icon-message"></i>导航一</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">选项4-1</el-menu-item>
- </el-submenu>
- </el-submenu>
- <el-submenu index="2">
- <template slot="title"><i class="el-icon-menu"></i>导航二</template>
- <el-menu-item-group>
- <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-group>
- <el-menu-item-group title="分组2">
- <el-menu-item index="2-3">选项3</el-menu-item>
- </el-menu-item-group>
- <el-submenu index="2-4">
- <template slot="title">选项4</template>
- <el-menu-item index="2-4-1">选项4-1</el-menu-item>
- </el-submenu>
- </el-submenu>
- <el-submenu index="3">
- <template slot="title"><i class="el-icon-setting"></i>导航三</template>
- <el-menu-item-group>
- <template slot="title">分组一</template>
- <el-menu-item index="3-1">选项1</el-menu-item>
- <el-menu-item index="3-2">选项2</el-menu-item>
- </el-menu-item-group>
- <el-menu-item-group title="分组2">
- <el-menu-item index="3-3">选项3</el-menu-item>
- </el-menu-item-group>
- <el-submenu index="3-4">
- <template slot="title">选项4</template>
- <el-menu-item index="3-4-1">选项4-1</el-menu-item>
- </el-submenu>
- </el-submenu>
- </el-menu>
- </el-aside>
-
- <el-container>
- <el-header style="text-align: right; font-size: 12px">
- <el-dropdown>
- <i class="el-icon-setting" style="margin-right: 15px"></i>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item>查看</el-dropdown-item>
- <el-dropdown-item>新增</el-dropdown-item>
- <el-dropdown-item>删除</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- <span>王小虎</span>
- </el-header>
-
- <el-main>
- <el-table :data="tableData">
- <el-table-column prop="date" label="日期" width="140">
- </el-table-column>
- <el-table-column prop="name" label="姓名" width="120">
- </el-table-column>
- <el-table-column prop="address" label="地址">
- </el-table-column>
- </el-table>
- </el-main>
- </el-container>
- </el-container>
-
-
- </div>
-
-
- <script src="js/vue.js"></script>
- <script src="element-ui/lib/index.js"></script>
- <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
-
-
- <script>
- new Vue({
- el: "#app",
- data() {
- const item = {
- date: '2016-05-02',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1518 弄'
- };
- return {
- tableData: Array(20).fill(item)
- }
- }
- })
-
- </script>
-
- </body>
- </html>
执行结果:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。