Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02

最新推荐文章于 2024-09-13 07:41:33 发布
最新推荐文章于 2024-09-13 07:41:33 发布
阅读量1.9k 收藏
点赞数
分类专栏： 前端框架之VUE 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45442617/article/details/114001585
版权
本文详细介绍了ElementUI中的Link文字链接组件及其属性用法，包括不同类型的链接和自定义样式。同时，文章深入讲解了Layout布局组件的使用，包括24分栏栅格系统以及Row和Col的属性应用，展示了如何创建灵活的页面布局。此外，还探讨了Container容器组件的使用，如Header、Aside、Main和Footer的组合，以及通过direction属性设置容器方向。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02

Link文字链接组件

1.文字链接组件的创建

  <el-link>默认文字链接</el-link>

2.文字链接组件的属性的使用

 <el-link type="success" href="http://www.baidu.com">默认文字链接</el-link>
 <el-link type="primary" :underline="false">默认文字链接</el-link>

Layout(栅格)布局组件的使用

通过基础的24分栏,迅速简便的创建布局

在element-ui中布局组件将页面划分为多个行row,每行最多分为24栏

使用Layout组件

<el-row>
  <el-col :span="8">占用8份</el-col>
  <el-col :span="8">占用8份</el-col>
  <el-col :span="8">占用8份</el-col>
</el-row>

注意:属性值为非字符串类型时需要进行数据绑定在属性前加上":"

 

Layout属性的使用

行属性的使用

 

​

<el-row>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
  <el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
</el-row>

列属性的使用

<el-row>
  <el-col :span="8" :offset="4" :push="3"><div style="border: 1px red solid">占用8份</div></el-col>
  <el-col :span="8"><div style="border: 1px red solid">占用8份</div></el-col>
  <el-col :span="8"><div style="border: 1px red solid">占用8份</div></el-col>
</el-row>

 

 

 

Container布局容器组件

创建布局容器(外层容器)

<el-container>
    
</el-container>

容器中包含的子元素

<el-header>：顶栏容器。
​
<el-aside>：侧边栏容器。
​
<el-main>：主要区域容器。
​
<el-footer>：底栏容器。
组件嵌套使用

<el-container>
      <!--头部-->
      <el-header><div style="border: 1px red solid"><h1>我是标题</h1></div></el-header>
    </el-container>
      <el-container>
      <!--左侧头部-->
      <el-aside><div style="border: 1px red solid"><h1>我是菜单</h1></div></el-aside>
      <el-main><div style="border: 1px red solid"><h1>我是中心内容</h1></div></el-main>
​
    </el-container>
      <el-footer><div style="border: 1px red solid"><h1>我是页脚</h1></div></el-footer>

可以通过direction属性设置容器为水平容器或者垂直容器

 

 

 

 

 

前端开发模块VUE-Element UI学习笔记
旺仔Sec&blog
08-12 1万+
基于 Vue 的一套桌面端组件库，提前封装好的 UI 模板，方便开发者快速搭建一个网站前端界面。官网：https://element.eleme.cn/
Element-UI全面入门与实战技巧
全世界的博客
06-06 1558
Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开发并维护。它提供了一系列丰富的 UI 组件，旨在帮助开发者快速构建高效、美观的 Vue 应用程序。Element-UI 是一款遵循 Ant Design 设计规范的 Vue UI 库，它涵盖了从按钮、输入框、选择器到表格、标签、进度条等众多常用的界面元素。Element-UI 的组件不仅功能全面，而且易于定制，使得开发者可以快速实现个性化的页面设计。Element-UI 的特点包括：在使用 Element-UI 之前，需要确
【Element-ui】Link 文字链接 与 Radio 单选框
m0_62599305的博客
12-02 2982
在前端开发中，用户界面的元素设计和交互方式对于用户体验至关重要。Element-ui作为一个流行的Vue.js组件库，提供了丰富多样的组件，其中包括Link文字链接和Radio单选框。Link文字链接可以帮助我们实现文字的跳转和引导，而Radio单选框则是让用户在多个选项中做出选择的重要工具。本文将深入介绍这两个组件的用法和特性，帮助你更好地理解并运用它们，提升前端界面的设计和交互性。本文详细介绍了Element-ui中的Link文字链接和Radio单选框的用法和特性。
【Element-ui】Layout与Container组件
m0_62599305的博客
12-02 1968
在现代Web开发中，页面的布局设计是至关重要的一环。为了简化布局的实现，Element UI提供了强大的Layout和Container组件。这两个组件使得页面布局变得更加灵活和易于管理。在本文中，我们将深入探讨Element UI的Layout和Container组件，了解它们的基本用法以及如何通过它们实现响应式的页面布局。Element UI 的 Layout 和 Container 组件为页面布局提供了便利的解决方案。通过灵活的组合，我们可以轻松创建出各种风格的页面布局，满足不同项目的需求。
ElementUI组件：Link 文字链接
ChinaDragon10的博客
01-30 1182
ElementUI组件：Link 文字链接
element ui 学习-01 (Layout 布局)(Container 布局容器)
qq_35900705的博客
10-14 5118
Layout 布局 用法: <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">...
Element UI 极简教程(1)
qq_41775769的博客
02-12 1871
Element UI 极简教程Layout 布局Container 布局容器Icon 图标Button 按钮Link 文字链接 本节主要介绍 Element UI 中的布局方式以及常用的 icon、Button、Link 组件 Layout 布局 通过基础的 24 栏划分，可以非常迅速便捷地创建布局。 通过 <el-row> 和 <el-col> 组件，并通过 col 组件的 span 属性就可以自由地组合布局。如下代码表示将 24 栏按照等大小划分成 3 个栏。 <el-r
使用 Element UI 组件进行布局与设计
# 1. 简介 Element UI 组件库 ...- **灵活的布局系统**：Element UI 提供了灵活的布局系统，通过容器组件、栅格系统和布局容器等组件，可以实现各种复杂的页面布局。 - **美观的设计风格**：Eleme
基于Vue Router和element-ui的LayOut
a123123sdf的博客
05-02 1013
vue布局，还有些功能待完善
Element-UI组件之数据Data
TwentyOne__的博客
07-03 6767
Element-UI组件之数据DataTable 表格基础表格带斑马纹表格带边框表格带状态表格固定表头固定列固定列和表头流体高度多级表头单选多选排序筛选自定义列模板展开行树形数据与懒加载自定义表头表尾合计行合并行或列自定义索引 Table 表格 基础表格 <template> <el-table :data="tableData" style="...
链接升级：Element UI ＜el-link＞ 的应用
m0_53117341的博客
09-13 4720
在本篇文章中，我们将深入探索Element UI中的<el-link>组件——一种样式化的文字链接组件，它不仅继承了传统<a>标签的所有功能，还引入了额外的样式和属性，使得创建具有吸引力的链接变得轻而易举。从基础的链接创建到高级的属性配置，我们将一步步分析如何利用<el-link>组件来丰富您的网页界面。我们将学习如何通过简单的标签和属性来控制链接的颜色、是否显示下划线、禁用状态，甚至如何添加图标来提升视觉效果。
Element-Ui组件（四）Link 文字链接
热门推荐
究极死胖兽的博客
06-03 4万+
Element-Ui组件（四）Link 文字链接 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 基础用法 el-link比较简单，用法与el-button类似，经常与icon搭配使用，type属性主要用于控制其颜色，以下是用一组链接制作的简单导航栏： <template> <div> ...
链接业务组件使用
weixin_30314813的博客
04-24 212
链接业务组件是指某列以弹出层列表的方式选择数据进行录入或者自定义逻辑去完成业务的操作组件。 通过配置属性（包括业务组件启动参数）即可实现。常见的有2种方式： 1：数据选择录入---参与者Join选取组件。 2：自定义JS逻辑代码---自定义事件（包括组织选择常用和链接业务窗口的快捷装配功能）。 一个列可设置多个链接业务组件，在列表VC中...
Element-UI源码——Link文字链接
qq_43391730的博客
04-01 550
默认情况下，父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被“透传”。这意味着当我们有一个单根节点的子组件时，这些绑定会被作为一个常规的 HTML attribute 应用在子组件的根节点元素上。当你编写的组件想要在一个目标元素或其他组件外面包一层时，可能并不期望这样的行为。的作用是将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递，也就是说当没有使用props接收时可以获取到。来显式绑定在一个非根节点的元素上。除外)，并且可以通过。
组件-Element---Link（文字链接）
GU_AO_SHI_TAI_DU的博客
07-02 1万+
组件-Element—Link 组件—文字链接 基础用法 <div> <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link> <el-link type="primary">主要链接</el-link> <el-link type=...
element-ui link 组件源码分享
qq_37309987的博客
02-02 1331
2.1.1 type 属性，string 类型，可选值有 primary / success / warning / danger / info，默认 default。2.1 组件主要有 type、underline、disabled、href、icon 这些属性，接下来我们对其属性进行一一揭秘。2.1.3 disabled 属性，是否禁用状态，boolean 类型，默认 false。
LinkElement使用
topfire7的专栏
06-10 1182
import flash.events.TextEvent;import fl.text.TLFTextField;import flashx.textLayout.elements.LinkElement;import flashx.textLayout.elements.SpanElement;import flashx.textLayout.elements.Paragrap
React-Hook 轮子公开课（从零开始）用最基础的方式写出一个简单的组件库——第四课【Link】文字链接组件
韩旭的博客
07-12 502
有兴趣的同学 可以先着手看源码，之前写的一系列开源组件库项目（有帮助的同学也帮忙点个star👍）其实谈到文本链接组件，我们可以参考向element、antd这些其实可以把这些看成是一个个的文字按钮组件，只不过底层就是使用a标签去实现的，又或者，我不想让其拥有a标签的href属性的话，底层完全就可以使用span标签来包裹文本，总的来说其实就相当于对文本进行了一个封装，我们可以通过属性进行判断到底是一个链接组件，还是一个单纯类似按钮功能的文本样式组件，简单的来讲我们只需要对其进行一个颜色封装即可，当然主要的也.
ElementUI文字链接组件的使用 [ElementUI]
m0_57001006的博客
07-18 2261
type类型underline是否有下划线布尔值默认为true，也就是默认是有下划线的，和HTML中超链接是默认是一样的。
我想要实现那种一个页面分成导航栏部分和页面部分的样子，然后点击导航栏部分中的首页，能在页面部分出现页面.vue里边的内容，不需要单独方法页面.vue的内容，导航三也是这样。这是HomePage页面代码<template> <div class="home"> <!-- 将子路由的数据进行渲染 --> <!-- <router-view></router-view> --> <el-row> <el-col :span="5"> <!-- 导航菜单 --> <h1 style="color: #fff; background-color: #000; ;">XXX系统</h1> <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#000" text-color="skyblue" active-text-color="#fff" unique-opened="true"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> <router-link to="首页.vue"> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">首页</span> </el-menu-item> </router-link> <el-
最新发布
04-09
<think>好的，用户的问题是关于如何用Vue.js和Element UI实现动态路由和导航栏布局，使得点击导航栏时自动渲染对应的.vue文件内容。首先，我需要确认用户的主要需求：他们希望导航栏点击后动态加载子页面内容，而无需单独的方法来加载这些内容。这意味着需要利用Vue Router的动态路由功能，结合Element UI的导航组件来实现。 接下来，我需要考虑Vue Router的动态路由配置。通常，动态路由可以通过在路由定义中使用路径参数，或者通过编程式导航来实现。但用户提到的是根据导航栏点击加载不同的.vue文件，这可能需要预先定义所有可能的路由，或者使用异步组件加载。不过，用户可能希望根据导航栏的配置动态添加路由，这涉及到Vue Router的addRoute方法。不过，Vue Router的addRoute通常用于动态添加路由，比如在用户登录后根据权限加载不同的路由，这可能符合用户的需求。 然后，Element UI的导航栏组件，比如el-menu，需要设置router属性为true，这样点击菜单项时会自动根据index属性进行路由跳转。因此，菜单项的index应该对应路由的路径。例如，如果有一个路由路径为'/home'，那么菜单项的index应该是'/home'，这样点击时会导航到该路径。 接下来，需要考虑如何组织路由配置。用户可能希望将路由信息与导航栏的菜单项配置关联起来，这样在添加新的页面时，只需要在路由配置中添加相应的条目，导航栏就会自动生成对应的菜单项。这可能需要在路由配置中添加meta字段，包含菜单的标题、图标等信息。 另外，关于动态加载.vue文件，Vue Router支持异步组件，可以通过import()语法来实现按需加载，这样在访问对应路由时才会加载相应的组件，优化初始加载时间。例如，component: () => import('./views/Home.vue')。 现在，需要将这些部分整合起来。首先，创建路由配置文件，定义所有路由，包括路径、组件和元信息。然后，在导航栏组件中，使用el-menu循环遍历路由配置中的需要显示在导航栏的路由，生成菜单项。设置el-menu的router属性为true，并确保每个菜单项的index属性是路由的路径。这样，点击菜单项时，Vue Router会自动导航到对应的路径，并在<router-view>中渲染对应的组件。 还需要注意，可能需要在导航栏组件中根据当前路由高亮对应的菜单项，这可以通过Vue Router的$route对象来实现，el-menu会自动处理这一点，如果index和当前路径匹配的话。 最后，确保主组件中包含<router-view>，用于显示子页面内容。这样整个流程就完成了：点击导航栏菜单项，路由变化，对应的组件被加载并渲染到<router-view>的位置。 可能还需要考虑嵌套路由的情况，如果导航栏有二级菜单，但用户的问题中没有提到，所以暂时不需要处理。另外，权限控制可能需要动态添加路由，但用户的问题可能只是基础的路由和导航栏集成，所以保持简单。 总结步骤：配置路由，使用Element UI的导航栏绑定路由路径，设置router-view，使用异步组件加载。这样用户就可以通过点击导航栏动态加载对应的.vue文件内容了。</think>根据您的需求，可以按照以下步骤实现动态路由和导航栏布局： ### 一、路由配置实现 1. **创建路由配置文件** ```javascript // router/index.js import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'Home', component: () => import('@/views/Home.vue'), meta: { title: '首页', icon: 'el-icon-house' } }, { path: '/about', name: 'About', component: () => import('@/views/About.vue'), meta: { title: '关于', icon: 'el-icon-info' } } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` ### 二、导航栏实现 2. **使用Element UI的菜单组件** ```vue <!-- components/Navbar.vue --> <template> <el-menu :router="true" mode="horizontal" :default-active="$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item v-for="route in menuRoutes" :key="route.path" :index="route.path" :route="{ path: route.path }"> <i :class="route.meta.icon"></i> {{ route.meta.title }} </el-menu-item> </el-menu> </template> <script> export default { computed: { menuRoutes() { return this.$router.options.routes.filter( route => route.meta && route.meta.showInMenu ) } } } </script> ``` ### 三、主页面布局 3. **创建基础布局组件** ```vue <!-- App.vue --> <template> <div class="layout-container"> <Navbar /> <div class="main-content"> <router-view></router-view> </div> </div> </template> <script> import Navbar from '@/components/Navbar.vue' export default { components: { Navbar } } </script> <style> .layout-container { height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; padding: 20px; } </style> ``` ### 四、关键实现原理 1. **动态路由绑定**：通过设置`el-menu`的`router`属性为`true`，菜单项的`index`值设置为路由路径，即可自动实现路由跳转[^1] 2. **组件懒加载**：使用`() => import()`语法实现路由组件的按需加载 3. **路由元信息**：通过`meta`字段携带菜单显示所需的附加信息
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全干程序员demo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值