在vue中使用element-ui二次封装面包屑导条

在vue中使用element-ui二次封装面包屑导条

由于这几天写了一个后台管理系统，多次使用的到了面包屑导航，所以我就把它封装起来使用了；

效果图

第一步

安装element-ui

	npm i element-ui -S

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

第二部

在vue文件 src=> components下面创建brand_com文件夹 => index.vue

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ level1 }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ level2 }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "my-brand",
  props: {
    level1: {
      type: String,
      default: "一级"
    },
    level2: {
      type: String,
      default: "二级"
    }
  }
};
</script>

然会在main.js里面全局引入

	//Vue全局面包屑组件
	Vue.component(myBrand.name, myBrand);

最后在你想用的组件里面调用就完事了

<my-brand level1="权限管理" level2="角色列表"></my-brand>