el-breadcrumb-item样式更改
时间: 2023-12-30 21:20:44 浏览: 37
el-breadcrumb-item样式更改可以通过修改CSS样式表来实现。可以使用以下代码来更改el-breadcrumb-item的样式:
```
/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
color: #d9bb95 !important;
font-weight: 400 !important;
}
/* 被选中时的颜色 */
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner {
color: #fc9105 !important;
font-weight: 800 !important;
}
```
其中,`::v-deep`是一个CSS伪元素,用于选择所有后代元素,包括跨越组件边界的后代元素。这样,我们就可以选择el-breadcrumb和el-breadcrumb-item组件中的元素,并修改它们的样式。在上面的代码中,我们使用了`color`和`font-weight`属性来更改字体颜色和字体粗细。
相关问题
el-breadcrumb-item
El componente el-breadcrumb-item es parte del conjunto de componentes del framework de Vue.js, Element UI.
Este componente se utiliza dentro del componente el-breadcrumb para definir cada uno de los elementos del breadcrumb.
Algunas de las propiedades que se pueden definir en el-breadcrumb-item son:
- to: la ruta a la que se redirige cuando se hace clic en el enlace del breadcrumb.
- replace: si es true, la ruta se reemplaza en lugar de añadir una nueva entrada al historial de navegación.
- target: el nombre de la ventana o marco donde se abrirá la ruta de destino.
- separator: el separador que se muestra entre los elementos del breadcrumb.
Ejemplo de uso:
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">Inicio</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/foo' }">Foo</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/foo/bar' }">Bar</el-breadcrumb-item>
</el-breadcrumb>
<el-breadcrumb-item :to="javascript: history.go(-1)">收缩</el-breadcrumb-item>这样写对吗
不对。在 Vue 模板语法中,可以在属性值中使用 JavaScript 表达式,但是必须使用 `v-bind` 或简写的 `:` 来绑定属性,否则会被当作字符串处理。
因此,如果您想要在 el-breadcrumb-item 中使用 JavaScript 表达式来返回上一级页面,应该将 to 属性绑定为一个返回字符串的函数,例如:
```html
<el-breadcrumb-item :to="() => { history.go(-1) }">收缩</el-breadcrumb-item>
```
这样,当用户点击该 el-breadcrumb-item 时,`history.go(-1)` 方法将被执行,页面将会返回到上一级。需要注意的是,这种方式只适用于返回上一级的场景,如果您需要返回到其他页面,可以在 to 属性中设置其他的 URL。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb"> <el-breadcrumb-item>首页</el-breadcrumb-item> <el-breadcrumb-item v-for="bread in breadList" v-bind:key="bread"> {{ breadsName[bread] }} </el-breadcrumb-item> </el-breadcrumb> </template> <script lang="ts"> import { Provide, Component, Watch, Prop, Vue } from 'vue-property-decorator'; @Component export default class BreadCrumb extends Vue { @Provide() private breadsName: { [index: string]: string } = { '1': 'title1', '1-1': 'title1-1', '1-2': 'title1-2', '1-3': 'title1-3', }; @Provide() private breadList: string[] = []; private created() { this.getBreadList(); } @Watch('$route') private getBreadList() { this.breadList = []; for (const routeInfo of this.$route.matched) { if (typeof routeInfo.name === 'string' && routeInfo.name !== 'home') { this.breadList.push(routeInfo.name); } } } } </script> <style lang="less"> .breadcrumb { margin-bottom: 20px; } </style>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)