ElementUI入门到入土

最新推荐文章于 2024-03-26 09:40:41 发布
最新推荐文章于 2024-03-26 09:40:41 发布
阅读量1.3k 收藏 13
点赞数 2
分类专栏： 大前端 SSM+VUE项目（传智健康） 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44480609/article/details/125620909
版权

1.简介

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功
能强大、风格统一的页面。
官网地址

在这里插入图片描述
注意ElementUI是基于VUE2.0版本的，所以在页面引入的时候通常也要引入VUE.JS

2.快速入门

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

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

Hello world

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUI</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
    </div>


    <script>

        new Vue({
            el: '#app',
            data: function () {
                return { visible: false }
            }
        }) 
    </script>
</body>

</html>

3.常用组件

进入开头超链接 官方网站
在这里插入图片描述

在这里插入图片描述

3.1 Container 布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

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

<div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: left;
      line-height: 60px;
    }
​
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
​
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 590px;
    }
  </style>

3.2 button按钮

<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>
        new Vue({
            el: '#app',
            data: {
            },
            methods: {
                
            }
        }) 
    </script>
</body>

3.3 Dropdown 下拉菜单

    <div id="app">
        <el-dropdown split-button size="small" trigger="click">
            个人中心
            <el-dropdown-menu>
                <el-dropdown-item>退出系统</el-dropdown-item>
                <el-dropdown-item divided>修改密码</el-dropdown-item>
                <el-dropdown-item divided>联系管理员</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>

3.4 NavMenu 导航菜单

    <div id="app">
        <el-menu>
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">导航一</span>
                </template>
                <el-menu-item>选项1</el-menu-item>
                <el-menu-item>选项2</el-menu-item>
                <el-menu-item>选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                </template>
                <el-menu-item>选项1</el-menu-item>
                <el-menu-item>选项2</el-menu-item>
                <el-menu-item>选项3</el-menu-item>
            </el-submenu>
        </el-menu>
        <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>
    </div>

3.5 Table 表格+ Pagination 分页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUI</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-table :data="tableData" stripe>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" align="center">
                <!--
                  slot-scope：作用域插槽，可以获取表格数据
                  scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
              -->
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination @current-change="handleCurrentChange" current-page="5" page-size="10"
            layout="total, prev, pager, next, jumper" :total="305">
        </el-pagination>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }]
            },
            methods: {
                handleUpdate(row) {
                    alert(row.date);
                },
                handleDelete(row) {
                    alert(row.date);
                },
                handleCurrentChange(page) {
                    alert(page);
                } 
            }
        }) 
    </script>
</body>

</html>

3.6 Message 消息提示

<body>
    <div id="app">
        <el-button :plain="true" @click="open1">消息</el-button>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open3">警告</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
            },
            methods: {
                open1() {
                    this.$message('这是一条消息提示');
                },
                open2() {
                    this.$message({
                        message: '恭喜你，这是一条成功消息',
                        type: 'success'
                    });
                },
                open3() {
                    this.$message({
                        message: '警告哦，这是一条警告消息',
                        type: 'warning'
                    });
                },
                open4() {
                    this.$message.error('错了哦，这是一条错误消息');
                }
            }
        }) 
    </script>
</body>

3.7 Message Box 弹框

<body>
    <div id="app">
        <el-button  type="danger"  @click="open">删除</el-button>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
            },
            methods: {
                open() {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            }
        }) 
    </script>
</body>

3.8 Form 表单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUI</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <!--
    rules：表单验证规则
-->
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <!--
      prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
    -->
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <el-select v-model="form.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="活动时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;">
                    </el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;">
                    </el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送">
                <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质">
                <el-checkbox-group v-model="form.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="特殊资源">
                <el-radio-group v-model="form.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                form: {
                    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' }
                    ]
                }
            },
            methods: {
                onSubmit() {
                    console.log(this.form);
                    //validate：对整个表单进行校验的方法，参数为一个回调函数。
                    //该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }
            }
        }) 
    </script>
</body>

</html>
信小呆666
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue-cli、elementUI的Vue超简单入门小例子（推荐）
12-10
这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Project name (my-project) #回车 ? Project description  #回车，也可以写点项目描述 ? Author #回车，或者输入
Element—UI—极速入门（极简）
m0_61105833的博客
09-12 2723
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
探索 Elm UI：构建优雅响应式前端界面的新选择
最新发布
gitblog_00069的博客
03-26 288
探索 Elm UI：构建优雅响应式前端界面的新选择 项目地址:https://gitcode.com/mdgriffith/elm-ui Elm UI 是一个开源的前端库，专为 Elm 框架设计，致力于简化和加速 Web 应用程序的用户界面开发。它提供了一种声明式的编程模型，结合了函数式编程的优势，使开发者能够创建出既美观又响应式的 UI 组件。 项目简介 Elm UI 的核心理念是将 UI 设计...
ElementUI入门
Princess_Y
11-18 1116
ElementUI 常用组件 （1）Container布局容器（用于页面布局） （2）Dropdown下拉菜单（用于首页退出菜单） （3）NavMenu导航菜单（用于左侧菜单） （4）Tabel表格（用于列表展示） （5）Pagination分页（用于列表分页展示） （6）Message消息提示（用于保存、修改、删除的时候成功或失败提示） （7）Tabs标签页（用于一个页面多个业务功能） （8）Form表单（新增、修改时的表单，及表单验证） 入门案例： <!DOCTYPE html> <h
Element UI入门
qq_48469418的博客
05-20 927
1.1什么是Element UI Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制 官方网站： https://element.eleme.cn/#/zh-CN/component/installation 1.2搭建环境 1.2.1创建vue项目 步骤一: 通过 vue-cli创建项目 vue create 项目名 步
Element-ui入门
qq_45126286的博客
04-23 416
Element-ui是（饿了么团队）基于MVVM框架Vue开源出来的一套前端UI组件，类似的UI框架也非常多，例如i-view，Vuetify等。使用vue搭建前台页面，它会帮助我们进行视图的渲染，但是样式还是需要自己完成。而使用这些组件则可以非常方便完成这些工作，效率更高。 关于Element-ui的介绍官方也有比较详细的资料官方网站 安装的方式也比较多，这里推荐npm安装，它能更好地和 web...
Element-UI快速入门
JackieLi的博客
05-11 1534
1、什么是ElementUI Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库官网 2、安装 npm install element-ui -S 3、在main.js中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI);
java入门到入土.md
02-20
java入门到入土.md
python从入门到入土练习习题
05-30
python从入门到入土练习习题
c＋＋入门与入土
07-03
初学者c语言 入门与入土 打算覅是uodf佛教会iofhnwihnfhwio 飞哦iwho
java从入门到入土第一卷
11-08
没事复习一遍
前端开源库-elm-ui
08-30
前端开源库-elm-ui榆树界面，榆树中的图书馆
elm-ui-widgets:elm-ui 可重用视图的集合
08-03
Elm-Ui-小部件 这个包包含为编写的独立小部件（无组件）。 这些小部件与此包的其他部分没有任何依赖关系。 因此，您可以根据需要使用多少。 。 它有一个可以使用的。 此外，它还支持自定义主题。 它是高度可定制的。 结帐以获取更多信息。 如果您有任何问题，请随时提出问题。 目录 例子 每个小部件都带有一个小部件类型和一个样式类型。 小部件类型是小部件的抽象表示。 它们可以用作更复杂的小部件的构建块。 样式类型具有所有样式属性（类似于 Element.Attribute）。 例如，考虑按钮小部件。 风格类型 button : ButtonStyle msg -> { text : String , icon : Icon , onPress : Maybe msg } -> Element ms
Spring从入门到入土——快速上手Spring
12-21
快速入门HelloSpring编写代码编写一个Hello实体类编写Spring文件，命名为beans.xml测试结果以及...Spring从入门到入土——概述以及IOC理论推导 Spring从入门到入土——快速上手Spring HelloSpring ​ 我们要想使用Sprin
Element UI入门
隔壁的橘猫的博客
10-06 243
Element UI Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 官网: https://element.eleme.cn/#/zh-CN/component/installation 搭建环境 步骤一:打开集成终端 通过vue-cli创建项目 vue create eui01 步骤二: 手动选择功能(Manually select features) 步骤三:选择需要的组件 - Babel : JavaScrip
elementui入门
zenghu12的博客
12-04 172
前后端分离概念 其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式，我们在实施的过程中主要对以下四个方面来进行比较和重新认识。 前后端分离开发的理解 (1)前后端未分离:(同一个项目) 前端代码和后端...
Element UI快速入门
weixin_44591656的博客
12-29 5016
Element UI快速入门 1.1 官方定义 网站快速成型工具和桌面端组件库 1.2 定义 Element UI 就是基于vue的一个ui框架，该框架基于vue开发了很多相关组件，方便我们快速开发页面。 2.安装Element UI 2.1 通过vue脚手架创建项目 vue init webpack element(项目名) 2.2 在vue脚手架项目中安装 Element UI # 1.下载elementUI npm i element-ui -S #2.指定当前项目中使用elementui /*
【Vue】Element-UI入门学习引导
wusandaofwy的博客
09-26 3965
Element-UI学习 了解vue开发中一些常用的布局组件库 项目导入element-ui el-button按钮 表单组件el-table 表单组件el-table基本使用 el-table组件插槽实现自定义列 el-table组件作用域插槽使用 分页组件el-pagination 表单组件el-form el-form组件基本使用 el-form组件表单校验 1.在data()中定义校验规则
java学习怎么从入门到入土
03-31
作为一个 AI，我不能协助您在学习过程中“入土”，因为我的宗旨是帮助人们更好地学习和成长。以下是一些建议，可以帮助您更好地学习 Java。 1. 学习基础：首先，您需要了解 Java 的基础知识，例如变量、数据类型、控制结构、循环等。可以通过阅读书籍或在线教程来学习这些基础知识。 2. 练习编程：学习编程最好的方法是通过编写代码来进行实践。可以使用练习题或者参与开源项目来锻炼编程能力。 3. 学习面向对象编程：Java 是一种面向对象编程语言，因此学习面向对象编程是非常重要的。学习类、对象、继承、封装、多态等概念，并且在实践中应用这些概念。 4. 学习 Java 库和框架：Java 有许多库和框架，可以帮助您更高效地编写代码。例如，学习 Java 的标准库、Spring 框架等。 5. 继续深入学习：Java 是一种非常广泛应用的编程语言，因此需要不断地深入学习并跟上技术的发展。可以学习 Java 8 新特性、Java EE、Android 开发等。 总之，学习 Java 需要不断地努力和实践，并且需要持续学习并跟上技术的发展。祝您学习愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值