Breadcrumb组件开发记录

组件构成

breadcrumb和breadcrumb-item

所以需要两个组件文件进行全局注册。

breadcrumb

• 用法

  <fan-breadcrumb separator="/">
  	...
  </fan-breadcrumb>
  

props只有一个属性

  props:{
        separator:{
            type:String,
            default:'/'
        }
    },

因为子组件需要这个属性，所以要给子组件传递这个参数。

可以采用provide/inject对子组件进行注册传递参数

	//breadcrumb
    //命名 直接返回这个对象
    provide(){
        return{
            breadcrumbVm:this
        }
    }

//breadcrumb-item
 //依赖注入
    inject:['breadcrumbVm'],     

总代码

<template>
  <div class="breadcrumb">
    <slot></slot>
  </div>
</template>

<script>
export default {
    name:'FanBreadcrumb',
    props:{
        separator:{
            type:String,
            default:'/'
        }
    },

    //命名 直接返回这个对象
    provide(){
        return{
            breadcrumbVm:this
        }
    }


}
</script>

<style>
    /**处理最后一个也有样式的问题*/
.breadcrumb .breadcrumb-item:last-child .breadcrumb-separator{
        display: none;
}
</style>

breadcrumb-item

• 用法：

  <fan-breadcrumb separator="/">
  	<fan-breadcrumb-item :to="{ path: '/' }">
  		
  	</fan-breadcrumb-item>
  </fan-breadcrumb>
  

  需要接收to属性，带有这个属性的组件会有被选中的颜色区别

  用inject来接收provide注入的内容

  inject:['breadcrumbVm']

  总代码

  <template>
  <span class="breadcrumb-item">
       <span :class="['baselink',{'is-link':to.path}]"
       @click="handlepath">
           <slot></slot>
      </span>
  
  <span class="breadcrumb-separator">{{separator}}</span>
  </span>
  </template>
  
  <script>
  export default {
      name:'FanBreadcrumbItem',
      props:{
          to:{
              type:Object,
              default:()=>({})
          }
      },
      data() {
          return {
              separator:''
          }
      },
      methods:{
          handlepath(){
              const {$router ,to}=this
              if(!to.path) return
              console.log(to.path);
              if($router) $router.push(to.path)
          }
      },
      //依赖注入
      inject:['breadcrumbVm'],
  
      mounted(){
          console.log(this.breadcrumbVm.separator);
         this.separator=this.breadcrumbVm.separator
      },
  
  
  }
  </script>
  
  <style>
  .breadcrumb-separator{
        margin: 0 9px;
      font-weight: 700;
      color: #c0c4cc;
  }
  
  /**基本样式 */
  .baselink{
          color: #606266;
  }
  
  .is-link{
      cursor: pointer;
      font-weight: 700;
      text-decoration: none;
      transition: color .2s cubic-bezier(.645,.045,.355,1);
      color: #303133;
  }
  .is-link:hover{
      color: rgb(184, 184, 197);
  }
    
  </style>