IE浏览器兼容Vue项目注意事项

最新推荐文章于 2024-03-26 09:31:40 发布

畅畅orchid

最新推荐文章于 2024-03-26 09:31:40 发布

阅读量463

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52094928/article/details/126466524

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

IE浏览器兼容Vue项目注意事项

1、百度分享插件，注意config中加上url的设置，以便分享链接及时刷新

`<div class="share_detail" v-if="isShare">
    <share :config="config" style="display:flex"></share>
</div>
        
config: {
    url: location.href, //加上之后分享链接实时更新
    sites: ["qq", "wechat"], // 启用的站点
    wechatQrcodeTitle: "微信扫一扫：分享", // 微信二维码提示文字
    wechatQrcodeHelper:
      "<p>微信里点“发现”，扫一下</p><p>二维码便可将此页面分享至朋友圈。</p>",
},`

2、样式展示：只展示2 3行文字的，一般要加上height样式，避免IE浏览器展示全部文字

.recommend_body_text{
    box-sizing: border-box;
    font-size: 14px;
    color: #555555;
    line-height: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height:90px;
}

3、项目底部提示语改成兼容IE11+

4、修改路由页面跳转模式

都改成：

toFreeBack(num){
    this.$router.push({ name:'feedback', query:{type: num}})
},

5、百度分享链接生成，源码修改，以便在IE浏览器中生成二维码图片

node_modules文件中vue-social-share文件中dist文件中 vue-social-share.js文件中，首先右击鼠标，格式化代码，然后修改其中的

代码大概972行

function o(t, e) {
    var r = d(t, "icon-wechat", "a");
    if (0 === r.length) return !1;
    var i = f('<div class="wechat-qrcode"><h4>' + e.wechatQrcodeTitle + '</h4><div class="qrcode"></div><div class="help">' + e.wechatQrcodeHelper + "</div></div>");
    // n = d(i[0], "qrcode", "div");
    r[0].appendChild(i[0]);
    var q= d(r[0],"qrcode");
    new QRCode(q[0], {
        text: e.url,
        width: e.wechatQrcodeSize,
        height: e.wechatQrcodeSize
    })
}