跟随Element学习Vue小技巧(39)——Breadcrumb

❝
努力是绝不会背叛人的
❞

前言

这两天，家里买了个智能扫地机。第一次工作的时候，3岁的孩子以为是什么动物，拿着手里的面包屑喂它，却没有一点反应。

小朋友急了，一不小心摔倒了，手里的面包屑撒了一地，这时候扫地机过来把面包屑给清理了。孩子高兴的跳了起来，“它吃了，它吃了！”

从此以后，家里到处都是面包屑o(╥﹏╥)o 哎，现在都不敢把面包带回家了！每次听到面包屑，都还有些后怕

1 Breadcrumb

辅助交互aria-*

如果我能看得见
就能轻易的分辨白天黑夜
就能准确的在人群中牵住你的手
如果我能看得见
就能驾车带你到处遨游
就能惊喜的从背后给你一个拥抱
如果我能看得见
...
可问题是，我看不见
上帝在我眼前遮住了帘
眼前的黑都是黑也许，你需要今天的这款产品，aria-*

代码片段

<template>
  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
    <slot></slot>
  </div>
</template>

技巧解析

❝
ARIA是能够让残障人士更加便利的访问Web内容的一套机制
role属性定义了对象的通用类型
ARIA属性提供了其他有用的特性
role="navigation",说明这是用来导航的
aria-label="Breadcrumb",说明这是导航里面的一个面包屑
更多好玩的功能，传送门发给你

ARIA 传送门
❞

2.BreadcrumbItem

路由跳转 router

周末，闲着没事，和兄弟们开了把黑

对面的吉吉国王，很是嚣张，跳来跳去，还时不时的嘲讽一下，哥几个杠上了，换了装备，只抓猴子，结果，不管是在野区，还是在塔下，猴子都被强杀

比赛结束，猴子赢了，估计心态是崩的

做人可以跳，不要太嚣张，╭(╯^╰)╮
谁说不可以，路由就可以

mounted() {
  this.separator = this.elBreadcrumb.separator;
  this.separatorClass = this.elBreadcrumb.separatorClass;
  const link = this.$refs.link;
  link.setAttribute('role', 'link');
  link.addEventListener('click', _ => {
    const { to, $router } = this;
    if (!to || !$router) return;
    this.replace ? $router.replace(to) : $router.push(to);
  });
}

技巧解析

❝
$router对象，有个push方法，想往哪跳，就往哪跳，嘻嘻嘻
跳转路径path，配上参数query
跳转名称name，配上参数params
要是跳累了，replace一下，^_^
更多高级玩法，传送门发给你

编程式的导航传送门
❞

「如果这个世界没有你」 「那我就在创造一个有你的世界」

跟随Element学习Vue小技巧(39)——Breadcrumb

努力是绝不会背叛人的

前言

1 Breadcrumb

辅助交互aria-*

代码片段

技巧解析

2.BreadcrumbItem

路由跳转 router

技巧解析

参考链接

往期回顾