vue 公共底部

最新推荐文章于 2024-03-02 16:11:17 发布

微微暖风

最新推荐文章于 2024-03-02 16:11:17 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 相关知识

本文链接：https://blog.youkuaiyun.com/cxz792116/article/details/77947777

vue 相关知识专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在Vue项目中创建并使用公共底部组件。通过将组件代码放入单独的JS文件，然后在需要的地方引入，实现了底部导航的复用。详细步骤包括编写组件代码、应用样式以及在首页（Home）展示该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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="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>