【区分vue2和vue3下的element UI Breadcrumb 面包屑组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 中,Element UI 提供了 el-breadcrumb 面包屑组件,而在 Vue 3 中,Element UI 的官方版本并没有直接更新以支持 Vue 3,但有一个类似的库叫做 Element Plus,它是为 Vue 3 设计的。

Vue 2 + Element UI

在 Vue 2 的 Element UI 中,el-breadcrumb 组件用于显示当前页面的路径,以面包屑的形式。

属性(Props)
  • separator:分隔符,默认为斜杠 /
  • separator-class:分隔符的类名。
事件(Events)

el-breadcrumb 组件在 Element UI 中并没有定义特定的事件。

示例
<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/about' }">关于我们</el-breadcrumb-item>
    <el-breadcrumb-item>联系我们</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  // ...
};
</s
### Vue 3使用 Element Plus 封装 Breadcrumb 面包屑组件Vue 3 中集成并封装 Element Plus 的 `Breadcrumb` 组件可以按照如下方式实现: #### 安装依赖库 首先,在项目中安装 Element Plus 库。可以通过 npm 或 yarn 来完成此操作。 ```bash npm install element-plus --save ``` 或者 ```bash yarn add element-plus ``` #### 导入 Element Plus 样式 接着修改项目的入口文件 `main.js`,导入整个 Element Plus 或仅需的部分模块以及相应的 CSS 文件[^2]。 ```javascript // main.js import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import router from &#39;./router&#39; // Import the entire library and its styles import ElementPlus from &#39;element-plus&#39;; import &#39;element-plus/dist/index.css&#39;; const app = createApp(App) app.use(ElementPlus) .use(router) .mount(&#39;#app&#39;) ``` 如果只想要按需加载,则可采用以下方法来减少打包体积: ```javascript // 使用 babel-plugin-component 插件来进行按需引入 import { ElBreadcrumb, ElBreadcrumbItem } from &#39;element-plus&#39; import &#39;element-plus/es/components/breadcrumb/style/css&#39; import &#39;element-plus/es/components/breadcrumb-item/style/css&#39; const app = createApp(App) app.component(ElBreadcrumb.name, ElBreadcrumb) .component(ElBreadcrumbItem.name, ElBreadcrumbItem) .use(router) .mount(&#39;#app&#39;) ``` #### 创建自定义 Breadcrumb 组件 现在可以在组件内部创建一个新的面包屑导航组件,并将其注册到应用当中[^1]。 ```html <!-- src/components/CustomBreadcrumb.vue --> <template> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="(item, index) in items" :key="index"> {{ item }} </el-breadcrumb-item> </el-breadcrumb> </template> <script setup lang="ts"> defineProps<{ items: string[] }>() </script> ``` #### 注册与使用组件 最后一步是在页面或其他父级组件里声明并使用这个新的 `CustomBreadcrumb` 组件。 ```html <!-- src/views/HomeView.vue --> <template> <div class="home"> <custom-breadcrumb :items="[&#39;首页&#39;, &#39;活动管理&#39;, &#39;活动列表&#39;]"></custom-breadcrumb> <!-- Other content here... --> </div> </template> <script setup lang="ts"> import CustomBreadcrumb from &#39;@/components/CustomBreadcrumb.vue&#39; </script> ``` 这样就完成了基于 Element Plus 的 `Breadcrumb` 组件的简单封装过程。可以根据实际需求进一步扩展功能或调整样式属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

加仑小铁

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

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

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

打赏作者

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

抵扣说明:

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

余额充值