JavaWeb 学习笔记 10：Element

最新推荐文章于 2024-03-04 00:14:18 发布

魔芋红茶

最新推荐文章于 2024-03-04 00:14:18 发布

阅读量334

点赞数

分类专栏： JAVA 文章标签： vue.js Element

本文链接：https://blog.csdn.net/hy6533/article/details/133161166

版权

JavaWeb 学习笔记 10：Element

Element 是一个基于 Vue 的前端组件框架，使用它可以快速构建美观的前端页面。

1.快速开始

创建一个简单的 JavaWeb 应用。

添加一个 Html 页面，并在<head>标签中加入 Element 和 Vue 的相关 js 引用：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue@2.7.14_dist_vue.min.js"></script>
    <script src="js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
</head>

需要注意的是，Element 使用的是 2.X 版本的 Vue。

在 Vue 的初始化代码中定义相关数据模型和生效的标签：

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

这里初始化 Vue 的方式是 2.X 版本的方式，与 3.X 的写法有所不同。

在 Html 中添加 Element UI 的相关组件：

<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>
</body>

最终的效果是有一个 button 按钮，点击后会出现一个弹出框。

之所以会这样，是因为 Element UI 的按钮标签el-button上绑定了一个点击事件，该事件由 Vue 的内联事件处理代码visible = true执行，具体效果是点击后visible这个数据模型会变成true。而代表弹框的 Element 标签el-dialog是否显示由属性visible.sync决定，该属性绑定了 Vue 的数据模型visible，所以在visible变成true后会显示。相应的，关闭弹窗后visible会变成false。

2.布局

Element 的布局分为 Layout 和 Container 两种。

2.1.Layout

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue@2.7.14_dist_vue.min.js"></script>
    <script src="js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
    <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"