vue爬坑记:全局面包屑组件

vuex文件夹下的代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  smallPage: true, // 菜单是否显示
  breadcumb: {}// 面包屑
}
const mutations = {
  changePage (state, value) {
    state.smallPage = value
  },
  changeBreadcumb (state, value) {
    state.breadcumb = value
  }
}
export default new Vuex.Store({
  state,
  mutations
})

• 全局组件(src/config/components.js)

import kmBreadcrumb from '../components/config/kmBreadcrumb'
export default (Vue) => {
  Vue.component('km-breadcrumb', kmBreadcrumb)
}

• 面包屑组件(src/components/config/kmBreadcrumb.vue)

<template>
  <div class="breadcumb">
    <div class="breadcumb-list">
      <div v-for="(item, i) in breadcumb.list" :key="i" class="breadcumb-link" :class="{last: i == breadcumb.list.length -1}">
        <router-link :to="{path: item.path}">{{item.name}}</router-link>
        <span v-if="i < breadcumb.list.length - 1"> ></span>
      </div>

    </div>
    <span class="breadcumb-title">
      {{breadcumb.active}}
    </span>
  </div>
</template>
<script>
export default{
  data(){
    return {
    }
  },
  props:{
    breadcumb:{
      type: Object
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~css/var.scss';
.breadcumb{
  height: .6rem;
  line-height: .6rem;
  padding: 0 .4rem;
  overflow: hidden;
  .breadcumb-title{ float: left;
    font-size: .16rem;
    color: #333;
  }
  .breadcumb-list {
    float: right;
    .breadcumb-link{ display: inline;
      a{ color: #666;
        font-size: .12rem;
      }
      span{
        padding: 0 .05rem;
      }
      &.last{
        a{ color: $font-active }
      }
    }
  }
}
</style>

• 需要放置面包屑导航的页面(src/components/products/index.vue)

<template>
  <div class="index">

  </div>
</template>
<script>

export default{
  data(){
    return {}
  },
  created() {
    this.$store.commit('changeBreadcumb', {
      active: '产品管理',
      list: [
        {name: "首页", path: "/home/index"},
        {name: "产品管理", path: ""}
      ]
    })
  }
}
</script>
<style lang="scss" scoped>

</style>

- hom.vue (文件路径:src/components/home.vue)

import kTop from "@/components/kTop"; import kLeft from "@/components/kLeft"; import util from "../utils/util"; export default { data() { return { menuName: "home" }; }, created() { if (util.getCooike("isPc") === null) { util.isPc(); } let isPc = util.getCooike("isPc"); this. $store.commit("changePage", isPc); }, components: { kmTop, kmLeft }, computed: { smallPage() { return this.$store.state.smallPage; }, breadcumb() { return this.$store.state.breadcumb; } } };

.home {
width: 100%;
min-height: 100%;
.main {
margin: 0.72rem 0 0 220px;
overflow: hidden;
}
&.smallPage {
.main {
margin: 0.72rem 0 0 70px;
}
}
}

原则是:代码复用,减少DOM元素的书写量