ie浏览器、低版本火狐浏览器兼容问题汇总

℡仅此、而已

已于 2022-05-20 17:43:58 修改

阅读量1.5k

点赞数

分类专栏：前端小强踩坑之路文章标签：前端 javascript css3

于 2022-05-19 15:05:23 首次发布

本文链接：https://blog.csdn.net/hzq88888/article/details/124863342

版权

前端小强踩坑之路专栏收录该内容

60 篇文章 4 订阅

订阅专栏

本文档介绍了如何使Vue应用兼容ES6语法，通过安装`babel-polyfill`和`promise.prototype.finally`库，并在入口文件引入。同时，展示了设置自定义滚动条样式的代码，包括通用样式和针对特定元素的隐藏滚动条方法。最后，提供了单点登录逻辑的实现代码。

摘要由CSDN通过智能技术生成

一、兼容es6语法

1、安装babel-polyfill

npm install babel-polyfill

2、在src/main.js最上面第一行代码引入

import 'babel-polyfill'

二、兼容.finally方法

npm install promise.prototype.finally --save

然后在src/main.js文件中引入

require('promise.prototype.finally').shim()

//getLogin.js文件
const getKeycloakUrl = () => {
  const { host } = window.location,
    pathArr = host.split('.'),
    pathArr2 = host.split(':'),
    r = /^\+?[1-9][0-9]*$/,
    isNumberFlag = r.test(pathArr[0]),
    isNumber = r.test(pathArr[0]) ? (pathArr2[1] = 18080) : (pathArr[0] = 'auth'),
    pathName = isNumberFlag ? pathArr2.join(':') : pathArr.join('.'),
    obj = {
      numFlag: isNumber,
      KC_URL: `${window.location.protocol}//${pathName}/auth`
    }
  return obj.KC_URL
}
export default getKeycloakUrl

//main.js  单点登录逻辑
import getKeycloakUrl from '@/utils/getLogin.js'
require('promise.prototype.finally').shim()
window.myLeftMenuList = {}
const oauth = Provide(OauthService),
  redireUrl = window.location.origin;
(async function () {
  try {
    await oauth.install(Vue, {
      // url: ((newUrls === '10.151.231.148') || (newUrls === '10.151.226.49')
      //   || (process.env.NODE_ENV === 'development'))
      //   ? process.env.VUE_APP_SSO_URL : getKeycloakUrl(),
      url: process.env.VUE_APP_SSO_URL,
      realm: process.env.VUE_APP_REALM,
      clientId: process.env.VUE_APP_CLIENT_ID,
      redirectUri: `${redireUrl}/`,
      loginRequired: true
    })
    const localToken = local.get('ROCHE_COMMON_CACHE').token,
      data = {
        token: localToken
      }
    await getPermiss(data).then(
      (resp) => {
        if (resp.code === 0) {
          const myPermissionsRes = resp.payload
          window.myLeftMenuList = myPermissionsRes
        } else {
          Message.error(resp.errorMessage)
        }
      },
      (error) => {
        Message.error(error)
      }
    )
  } finally {
    new Vue({
      vuetify, router, render: (h) => h(App)
    }).$mount('#app')
  }
})()

三、滚动条样式兼容，隐藏滚动条

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}   //浏览器样式自定义

.infoPlanDate::-webkit-scrollbar {
    display: none;   //普遍浏览器
 }
.infoPlanDate {
    scrollbar-width: none;  //火狐浏览器
}
.infoPlanDate {
    -ms-overflow-style: none;  //ie浏览器
}