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

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

vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总地表最强的电脑运行了一下,当 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
二维数组更改vue_使用vue中的v-for遍历二维数组的方法
如下所示: {{itemss}} 其中,data数据为: this.data = [ [ { type: '', name: '资产', start: '期末余额', end: '期初余额' }, { ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
vue中使用图像编辑器tui-image-editor(二)——应用示例
vue中使用图像编辑器tui-image-editor(二)--应用示例效果代码 mark.vue <template><div class="drawing-cont ...
vue中使用qrcode生成二维码并实现打印功能
问题产生背景: 客户要求根据表格中选中的数据产生对应的二维码并可以利用打印机打印出来必要条件:vue.需要安装qrcode和vue-print-nb依赖(具体安装可自行百度) 实现思路: 当用户勾选 ...

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

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

效果图

第一步

第二部

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

最新文章

热门文章