</el-breadcrumb> </template> .breadcrumb-move, .breadcrumb-enter-active, .breadcrumb-leave-active { transition: all 0.5s; } .breadcrumb-enter-from, .breadcrumb-leave-to { opacity: 0; transform: translateX(20px); } .breadcrumb-leave-active { position: absolute; } 1. 2. 3. 4. 5. ...
第一部分的代码就是根据获取的路由数据进行面包屑的渲染,使用了v-for来进行el-breadcrumb-item的渲染,我们在这里规定了数组的最后一项是不可被点击的,并且给它指定了样式,然后其他项就可以被点击,并且绑定了点击事件,将渲染的item传递过去,我们重点来讲解一下js这部分的代码。 js部分的代码: import { ref, watch...
第一部分的代码就是根据获取的路由数据进行面包屑的渲染,使用了v-for来进行el-breadcrumb-item的渲染,我们在这里规定了数组的最后一项是不可被点击的,并且给它指定了样式,然后其他项就可以被点击,并且绑定了点击事件,将渲染的item传递过去,我们重点来讲解一下js这部分的代码。 js部分的代码: import { ref, watch ...
</el-breadcrumb-item> </transition-group> </el-breadcrumb> </template> 动画处理 我们来为面包屑增加一些动画样式: 在Breadcrumb/index中增加transition-group <template> <el-breadcrumb class="breadcrumb" separator="/"> <transition-group name="breadcrumb"> ... </transition-group> </el-breadcrumb> ...
</el-breadcrumb> </> ) } const BreadcrumbItem=()=>{ const breMenuList=[ { id:1, name:'日志管理' }, { id:2, name:'日志新增' } ] return( <> { breMenuList.map(x=>{ return <el-breadcrumb-item key={x.id}>{x.name}</el-breadcrumb-item> }) } ...
面包屑是基于el-breadcrumbUI不是问题,element-plus封装的比较好。数据源来源简单说下。 1、监听路由变化 监听路由的变化,变化之后获取组装数据源 代码语言:javascript 复制 watch(()=>currentRoute.path,(path)=>{if(path.startsWith('/redirect/')){return}state.getBreadcrumb()}) ...
</el-breadcrumb> <el-tabs> <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane> <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane> <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane> </el-tabs> <!-- 商品列表--> ...
</el-breadcrumb> </template> import { generateTitle } from'@/utils/i18n'import { ref, watch } from'vue'import { useRoute, useRouter } from'vue-router'import { useStore } from'vuex'const route=useRoute()//生成数组数据const breadcrumbData =ref([]) const getBreadcrumb...
一,代码: 官方文档地址: https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2
{// if you go to the redirect page, do not update the breadcrumbsif (route.path.startsWith('/redirect/')) {return}getBreadcrumb()})getBreadcrumb();.app-breadcrumb.el-breadcrumb {display: inline-block;font-size: 14px;line-height: 50px;margin-left: 8px;.no-redirect {color: #97a8be;c...