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