1、公共底部组件放到一个js文件中,代码如下
Vue.component('v-footer', {
props: ['active'],
template: '<ul class="v-footer">\
<li @click="goto(0)"><i :class="[active==0 ? \'icon-shouye-1\':\'icon-shouye\',\'iconfont\']"></i></li>\
<li @click="goto(1)"><i :class="[active==1 ? \'icon-xiaoxi-1\':\'icon-xiaoxi\',\'iconfont\']"></i></li>\
<li @click="goto(2)"><i :class="[active==2 ? \'icon-wode-1\':\'icon-wode\',\'iconfont\']"></i></li></ul>',
data: function () {
},
methods: {
goto: function (i) {
var pages = ["home.html", "message.html", "my.html"]
location.href = pages[i]
}
}
})
说明: \ 代表转义符 换行。 其中页面在需要公共底部页面的html中引入的有阿里在线矢量图。
2、css页面的样式省略
3、在需要公共底部的html页面中引入 实例以首页(home)代码 如下
<!DOCTYPE html>
<html>
<head>
<script src="dist/common.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>治安小区</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<link href="//at.alicdn.com/t/font_407826_hlv51u2ldnp14i.css" rel="stylesheet" /> // 阿里矢量图地址
<link href="./css/footer.css" rel="s