美文网首页
2018-05-24Vue 微信端动态改变页面title的npm

2018-05-24Vue 微信端动态改变页面title的npm

作者: 小飞侠zzr | 来源:发表于2018-05-24 15:09 被阅读0次

    npm install vue-wechat-title 安装

    const router = new VueRouter({
    mode: 'history',
    routes:[
    {
    name: 'index',
    path: '/',
    meta: {
    title: '甘慧琳'
    },
    component: index
    }
    component: root
    }
    ]
    });
    Vue.use(require('vue-wechat-title')); //实例化

    献上大神源码

    (function () {
    function install (Vue) {
    var setWechatTitle = function (title, img) {
    if (title === undefined || window.document.title === title) {
    return
    }
    document.title = title
    var mobile = navigator.userAgent.toLowerCase()
    if (/iphone|ipad|ipod/.test(mobile)) {
    var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    // 替换成站标favicon路径或者任意存在的较小的图片即可
    iframe.setAttribute('src', img || '/favicon.ico')
    var iframeCallback = function () {
    setTimeout(function () {
    iframe.removeEventListener('load', iframeCallback)
    document.body.removeChild(iframe)
    }, 0)
    }
    iframe.addEventListener('load', iframeCallback)
    document.body.appendChild(iframe)
    }
    }
    Vue.directive('wechat-title', function (el, binding) {
    setWechatTitle(binding.value, el.getAttribute('img-set') || null)
    })
    }

    if (typeof exports === 'object') {
    module.exports = install
    } else if (typeof define === 'function' && define.amd) {
    define([], function () {
    return install
    })
    } else if (window.Vue) {
    Vue.use(install)
    }
    })()

    相关文章

      网友评论

          本文标题:2018-05-24Vue 微信端动态改变页面title的npm

          本文链接:https://www.haomeiwen.com/subject/bzdsjftx.html