vue 公共底部

1、公共底部组件放到一个js文件中,代码如下

Vue.component('v-footer', {
    props: ['active'],
    template: '',
    data: function () {

    },
    methods: {
        goto: function (i) {
            var pages = ["home.html", "message.html", "my.html"]
            location.href = pages[i]
        }
    }
})

 说明: \ 代表转义符 换行。 其中页面在需要公共底部页面的html中引入的有阿里在线矢量图。

2、css页面的样式省略
3、在需要公共底部的html页面中引入 实例以首页(home)代码 如下


<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="stylesheet" />   // 底部样式

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            height: 100%;
            width: 100%;
        }

        #home-content {
            height: 100%;
            width: 100%;
            background-color: #f1f1f1;
        }

        .home-banner {
            position: relative;
            height: 4.3rem;
            width: 100%;
            background: url('./images/home-banner.png') no-repeat;
            background-size: 100% 100%;
        }

        .homeSearch-box {
            position: absolute;
            left: 0.5rem;
            top: 0.2rem;
            width: 6.5rem;
            height: 0.7rem;
            background-color: rgba(255,255,255,0.5);
            border-radius: 0.35rem;
            padding-left: 0.3rem;
        }

        .homeSearch-img {
            width: 0.47rem;
            height: 0.47rem;
            position: absolute;
            top: 0.12rem;
            left: 0.4rem;
        }

        .homeSearch-input {
            position: absolute;
            top: 0;
            left: 1.1rem;
            width: 5rem;
            height: 0.7rem;
            border: none;
            outline: none;
            background:transparent;
            color: black;
        }

        .home-nav {
            width: 100%;
            padding: 0.2rem;
            padding-bottom:0;
            display: flex;
            justify-content: space-between;
        }

        .home-navLeft {

            display: flex;
            flex-direction: column;
        }

        .home-navLeftItem {
            display: flex;
            flex-direction: row;
           margin-bottom: 0.2rem;
        }

        .home-navRight {
            display: flex;
            flex-direction: column;
        }

        .home-navRighgItem {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }

        .home-navLeftImg {
            width: 3.45rem;
            height: 3.0rem;
        }

        .home-navRightImg {
            width: 3.45rem;
            height: 1.93rem;
        }
    style>
head>



<body>
    <div id="home-content">
        <div class="home-banner">
            <div class="homeSearch-box">
                <img class="homeSearch-img" src="http://img.zmnbx.com//dist/Images/search2x.png" />
                <input class="homeSearch-input" type="text" placeholder="请输入关键字搜索" />
            div>
        div>
        <div class="home-nav">
            <div class="home-navLeft">
                <a class="home-navLeftItem" href="scanCode.html">
                    <img class="home-navLeftImg" src="images/home-navLeft1.png" />
                a>
                <a class="home-navLeftItem" href="paymentDetails.html?6">
                    <img class="home-navLeftImg" src="images/home-navLeft2.png" />
                a>
            div>
            <div class="home-navRight">
                <a class="home-navRighgItem" href="communityNotice.html">
                    <img class="home-navRightImg" src="images/home-navRight1.png" />
                a>
                <a class="home-navRighgItem" href="chargeOnline.html">
                    <img class="home-navRightImg" src="images/home-navRight2.png" />
                a>
                <a class="home-navRighgItem" href="visitedNotice.html">
                    <img class="home-navRightImg" src="images/home-navRight3.png" />
                a>
            div>
        div>
        <v-footer :active="0">v-footer>    // 加载公共底部
    div>
body>

html>
<script src="../../../H5/Content/src/common/vue.js">script>   // 引入vue.js 文件
<script src="../../../H5/Content/src/js/jquery-3.1.0.js">script>
<script src="./dist/footer.js">script>            // 引入公共底部js文件

<script type="text/javascript">
    new Vue({ el: "#home-content" });
script>

你可能感兴趣的:(前端)