在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>