html引入公共部分如header，footer等等
123.gif
- 先建立個
header.js寫公共組件
let headerTemplate = `
<el-header class=“header ”>
<div class=“header-content”>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">處理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作臺</template>
<el-menu-item index="2-1">選項1</el-menu-item>
<el-menu-item index="2-2">選項2</el-menu-item>
<el-menu-item index="2-3">選項3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">選項4</template>
<el-menu-item index="2-4-1">選項1</el-menu-item>
<el-menu-item index="2-4-2">選項2</el-menu-item>
<el-menu-item index="2-4-3">選項3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a target="_blank">訂單管理</a></el-menu-item>
</el-menu>
</div>
</el-header>
`
Vue.component('my-header',{
template: headerTemplate,
props: {
activeIndex: 1
},
methods: {
handleSelect(index) {
location.href = (`./test.html?keyWorld=${index}`)
}
},
});
- 在
index.html中引入
引入已寫好的header.js
<script type="text/javascript" src="./js/header.js"></script>
再在body里寫
<my-header></my-header>
全代碼是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" version="1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<!-- 引入element-ui CSS -->
<link rel="stylesheet" href="./css/element.min.css" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<title>html+vue+elementui 引入公共代碼</title>
<style>
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
[v-cloak] {
display: none;
}
#app{
overflow: hidden;
}
.header {
background-color: #fff;
width: 100%;
height: 61px;
position: fixed;
right: 0;
left: 0;
z-index: 999;
}
.header-content {
position: relative;
width: 1190px;
height: 100%;
margin: 0 auto;
}
.main {
background-color: gray;
position:relative;
width: 100%;
min-height: calc(100vh - 60px);
text-align: center;
margin-top: 61px;
}
.main-content {
width: 1190px;
height: 10000px;
background-color: #fff;
margin: 0 auto;
border: solid;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<el-container>
<!-- 引入公共部分 -->
<my-header></my-header>
<el-main class="main">
<div class="mian-content">
index.html
</div>
</el-main>
</el-container>
</div>
</body>
<!-- vue需要在引入element-ui之前引入 -->
<script src="./js/vue.js"></script>
<!-- 引入element-ui js -->
<script src="./js/element.min.js"></script>
<!-- 引入header.js -->
<script type="text/javascript" src="./js/header.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
}
},
created() {},
mounted() {},
method: {},
})
</script>
</html>
test.html頁面和index.html頁面一樣
