vue 公共底部

最新推荐文章于 2024-04-20 09:47:58 发布

微微暖风

最新推荐文章于 2024-04-20 09:47:58 发布

阅读量4.7k

点赞数

分类专栏： vue 相关知识

本文链接：https://blog.csdn.net/cxz792116/article/details/77947777

版权

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

最低0.47元/天解锁文章

微微暖风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 公共底部

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\',\'
复制链接

扫一扫