<template>
  <div class="header_title">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">{{ item.meta.name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'Bread',
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="less">
.header_title {
  // keep breadcrumb container scoped, specifics handled below
}
// Prevent text caret and focus outline on breadcrumb items (apply deeply into child components)
/deep/ .el-breadcrumb__item,
/deep/ .el-breadcrumb__item *,
/deep/ .el-breadcrumb,
/deep/ .el-breadcrumb a,
/deep/ .el-breadcrumb a *,
/deep/ .el-breadcrumb__inner,
/deep/ .el-breadcrumb * {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  caret-color: transparent;
  cursor: pointer;
  outline: none;
}

/deep/ .el-breadcrumb__item:focus,
/deep/ .el-breadcrumb__item *:focus,
/deep/ .el-breadcrumb a:focus,
/deep/ .el-breadcrumb *:focus,
/deep/ .el-breadcrumb__inner:focus {
  outline: none;
  caret-color: transparent;
}
