使用element-ui
先安装环境
npm install element-ui -S
在main.js 载入element-ui 样式
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)
});
在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 size
与 zIndex
字段。size
用于改变组件的默认尺寸,zIndex
设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
为了减少项目体积 element-ui 可以按需引用!!可以查看详细的api文档
Element-UI
1.加载本地图片失败,不能直接给路径,需要require
url: require('./image/logo.jpeg'),
element 导航栏el-menu router 页面传参
<el-menu
style="border-bottom:0;"
class="el-menu-demo flex"
mode="horizontal"
text-color="#fff"
background-color="#018b43"
active-text-color="#ea0c20"
router //这里
:default-active="$route.path" // 这里
>
<el-menu-item
v-for="item in items"
:key="item.id"
:index="item.url" // 这里
>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
如果需要传参数
<el-menu-item
v-for="item in items"
:key="item.id"
:index="item.url"
:route="{ path: item.url, query: { name: item.id } }" // 这里是加的
>
<span slot="title">{{ item.name }}</span>
</el-menu-item>