Element

已于 2024-03-27 16:45:09 修改
阅读量899 收藏 6
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 前端基础 文章标签： vue element
于 2024-03-27 15:36:37 首次发布
>版权声明：本文为延成原创文章，转载请标明出处
本文链接：https://blog.csdn.net/AliEnCheng/article/details/137078968

1、Element 基本使用

1.1、Element介绍

  • Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。

  • 使用Element前提必须要有Vue。

  • 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~

  • Element官网：https://element.eleme.cn/#/zh-CN

  • 自己完成的按钮

    在这里插入图片描述

  • Element 提供的按钮

    在这里插入图片描述

1.2、Element快速入门

  • 开发步骤

    1. 引入 Element 样式文件夹。

      引入组件库 (资料/element/element-ui 整个放到webapp路径，如果是静态工程就放到项目根目录)

      在这里插入图片描述

    2. 引入 Vue 核心 js 文件。

      在项目根目录下创建js文件夹，将课后资料中的vue.js文件放到该文件夹下

      在这里插入图片描述

    3. 在html中引入vue.js

      在这里插入图片描述

    4. 在html中引入 Element 核心 js 文件。

      说明：element组件库基于vue的,所以要先导入vue。在导入 Element 核心 js 文件。至于如何导入 Element 核心 js 文件，我们可以参考官网说明：

      在这里插入图片描述

      从官网复制之后修改引入本地的文件

      在这里插入图片描述

    5. 编写按钮标签。

    在官网中找到按钮标签的代码，将代码复制到html页面中：

    在这里插入图片描述

    在这里插入图片描述

    1. 通过 Vue 核心对象加载元素。

      <script>
    new Vue({
        el:"#div"
    });
</script>

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <!--
        element组件库基于vue的,先导入vue
    -->
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../element-ui/lib/index.js"></script>

</head>
<body>
<!--
    element组件库: 快速搭建网站效果
-->
    <div id="div">
        <button>按钮标签</button>
        <br>
        <div>
            <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>
        </div>

        <div style="margin: 20px 0">
            <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>
        </div>

        <div>
            <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>
        </div>
    </div>
</body>
<script>
    new Vue({
       
        el:"#div"
    });
</script>
</html>

1.3、基础布局

基础布局在官网位置：

在这里插入图片描述

将页面分成最多 24 个部分，自由切换。并且支持响应式布局。

在这里插入图片描述

  • 代码实现

    <!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>
<!--
    一行最多24份,超过就失效
-->
    <div id="div">
        <el-row>
            <!--一行超过24份，就不显示了-->
             <!--<el-col :span="25"><div class="grid-content bg-purple-dark"></div></el-col>-->
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
        <el-row>
             <!--一行被拆分为2列，每列12份-->
            <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>
             <!--一行被拆分为3列，每列8份-->
            <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>
             <!--一行被拆分为4列，每列6份-->
            <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>
             <!--一行被拆分为6列，每列4份-->
            <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"
    }
最低0.47元/天 解锁文章
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值