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

本文档介绍了如何使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浏览器
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值