<!--
 * @Description  : 面包屑 item
 * @Author       : luqing
 * @Date         : 2020-10-29 14:46:25
 * @LastEditors  : luqing
 * @LastEditTime : 2020-11-24 17:05:32
-->
<template>
  <span class="el-breadcrumb__item">
    <span
      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
      ref="link"
      role="link">
      <slot></slot>
    </span>
    <dao-svg-icon v-if="separatorClass" icon-class="dao-icon-arrow-right" class="el-breadcrumb__separator" :class="separatorClass"></dao-svg-icon>
    <!-- <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i> -->
    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
  </span>
</template>
<script>
  export default {
    name: 'ElBreadcrumbItem',
    props: {
      to: {},
      replace: Boolean
    },
    data() {
      return {
        separator: '',
        separatorClass: ''
      };
    },

    inject: ['elBreadcrumb'],

    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);
      });
    }
  };
</script>
<style scoped>
/* 不生效 */
/* svg path{
  stroke: #f00 !important;
  fill: #f0f !important; 
} */
/* 依旧不生效 */
/* svg g path{ 
  stroke: #00f !important;
  fill: #0ff !important;  */
/* } */
  /* 生效 */
/* svg {  */
  /* stroke: #0f0 !important;  */
  /* 去掉了svg文件中的 stroke="none" 就生效了 ， 但是 fill 即使去掉了fill="none" 也依旧不生效 */
  /* fill: #ff0 !important;  */
/* } */
</style>
