@wecity/tdesign-vue-ie

介绍

@wecity/tdesign-vue-ie 是基于 Tdesign Vue 2.x 组件库可兼容 IE >= 9 浏览器的 IE 兼容包，本库旨在解决 tdesign-vue 库在 IE 中出现的样式、组件等兼容问题。

使用说明

安装

• 安装@wecity/tdesign-vue-ie

npm install @wecity/tdesign-vue-ie --save
# or
yarn add @wecity/tdesign-vue-ie

兼容包配置

更改vue.config.js transpileDependencies中添加兼容库配置

export.module = {
  transpileDependencies: ['tdesign-icons-vue'],
}

babel 依赖

{
  "@vue/cli-plugin-babel": "~4.5.0",
  "babel-core": "^6.26.3",
  "babel-eslint": "^10.1.0",
  "babel-loader": "7",
  "babel-plugin-lodash": "^3.3.4",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.7.0"
}

babel.config.js or .babelrc 兼容配置

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        useBuiltIns: 'entry',
      },
    ],
    [
      'env',
      {
        modules: false,
        useBuiltIns: 'entry',
        targets: {
          node: 'current',
        },
      },
    ],
  ],
  env: {
    development: {
      plugins: ['dynamic-import-node'],
    },
  },
  plugins: ['lodash'],
};

兼容包 API 说明

registerIEPolyfill

ie 兼容的注册方法

参数	类型	默认值	是否必须	说明
options	object	{}	否	registerIEPolyfill 方法的参数
options.autoAddClass	boolean	true	否	自动添加包裹类
options.router	object	null	否	路由实例，优化 ie9 下 placeholder 的事件解绑

setWrapperClass

动态修改包裹类：如果需求某些浏览器版本加入包裹类，某些浏览器版本不需要，则可以通过获取 setWrapperClass 方法设置

参数	类型	默认值	是否必须	说明
option	boolean	true	否	setWrapperClass 方法的参数

isMSIE

返回 ie 浏览器的版本的方法，不是 ie 浏览器时返回 false

兼容包注册

在 vue 项目中main.js 中添加引用

// JS，组件兼容
import { registerIEPolyfill, isMSIE } from '@wecity/tdesign-vue-ie';
// 样式兼容
if (isMSIE()) {
  // index.css文件主要目的是解决IE中css的变量不支持问题，引入index.css后无需引入tdesign的全局样式
  // 如果有自己的主题皮肤样式且自行解决css变量问题，也不需要引用index.css
  require('@wecity/tdesign-vue-ie/dist/theme/index.css');
  // ie.css文件主要目的是解决IE中不支持flex布局(IE9)以及其他属性不兼容问题，改写为其他属性
  require('@wecity/tdesign-vue-ie/dist/theme/ie.css');
}

registerIEPolyfill(options);

使用须知

有哪些不兼容的地方

全局

• 自定义主题、暗黑模式
• 渐变
  • 组件渐变效果将优雅降级，不影响功能使用；
  • 组件中涉及可设置色值渐变的 API，eg：progress 组件设置 color 的渐变；
• 动画
  • 组件动画效果将优雅降级，不影响功能使用，eg：点击 button 的动画效果；
  • 组件中涉及可调整动画效果的 API，eg：progress 组件的 设置 status="'active'"的动画；
• 自定义插入内容的 Flex 布局
  • message、alert、draw 等组件默认样式均正常，但若涉及自定义 icon、头部等场景，需自行调整 width/height；eg: alert 组件固定自定义 icon 宽度，若 icon 自定义 slot，需业务自行 css 设置宽度覆盖；

组件

• Upload
  • 具体不兼容的查看下面《Upload 组件兼容情况》。
• Table
  • BaseTableCol Props: fixed 无效(IE9/10/11)。
• Grid
  • Row Props: justify 的 space-between 与 space-around 属性无效(IE9/10/11)；
  • Row Props: gutter 最大垂直距离为 100(IE9/10/11)；
  • Col Props: flex、order 无效(IE9/10/11)；
• Drawer
  • 兼容包使用了默认的 header 和 footer 高度去计算中间的 body 高度，以做到 header,body,footer 撑满 drawer 高度，又不会出现滚动条的效果。不支持动态的 footer, header 高度，若用户自定义 footer，header 高度，需自行覆盖 body 的高度，避免样式出现异常(IE9/10/11)。
• Dialog
  • Dialog 拖拽功能失效(IE9/10/11)。
• Notification
  • Notification 固定三行高度，文案太长时内容将自动显示...，在 IE 下将优雅降级，无"..."效果(IE9/10/11)。
• Icon
  • loading 图标: 在 IE9 的浏览器下不支持动画，loading 图标无法旋转。

Layout 组件兼容情况

layout默认使用block(inline-block)布局。兼容包还提供了一种table布局。目的是兼容复杂布局的情况。在对应的t-layout加class .t-table-layout

<t-layout class="t-table-layout">
  <t-header>Header</t-header>
  <t-content>Content</t-content>
  <t-footer>Footer</t-footer>
</t-layout>

Upload 组件兼容情况

根据 Tdesign Upload 组件进行扩展开发兼容支持 IE>=9 版本 IE 浏览器 官方 Upload API 文档(https://tdesign.tencent.com/vue/components/upload?tab=api)

API 兼容清单

API	说明	Tdesign Upload	IE Upload
accept	文件类型	file_extension audio/* video/* image/* media_type	file_extension image/* image/type
action	上传接口地址	✅	✅
autoUpload	自动上传	✅	✅
beforeUpload	上传文件前钩子函数	✅	✅
data	上传文件额外数据	✅	✅
default	触发上传内容	✅	✅
disabled	是否禁用	✅	✅
draggable	是否拖拽上传	✅	IE>=10
fileListDisplay	用于完全自定义文件列表内容	✅	✅
files	已上传文件列表(注意是上传完成的列表)	✅	✅
defaultFiles	已上传文件列表, 非受控属性(理解读取已有数据时设置))	✅	✅
format	文件上传前转换文件数据	✅	✅
formatResponse	用于格式化文件上传后的响应数据。error 用于显示错误提示，如果 error 值为真，组件会判定为上传失败；url 用于上传文件/图片地址	✅	✅
headers	设置上传的请求头部	✅	IE 9版本header数据设置在request body
isBatchUpload	是否做为一个独立文件包提交	✅	✅
max	控制文件最大上传个数	默认为：0	默认为：50
method	HTTP 请求类型	可选: POST/GET/PUT/OPTION	IE9 只能使用POST, IE 10,IE 11 可支持 POST, GET, PUT, OPTION
multiple	是否多文件	✅	IE下支持多文件上传，不支持一次选择多个文件
name	文件上传时的名称	✅	✅
placeholder	占位符	✅	✅
requestMethod	自定义上传方法	✅	IE下自定义上传行参为Form表单对象``requestMethod(file, ieUpload)
showUploadProgress	是否显示上传进度	✅	IE版本 >= 10
sizeLimit	文件大小限制	✅	IE版本 >= 10
theme	组件风格	✅	✅
tips	小文本提示	✅	✅
trigger	触发上传的内容	✅	✅
uploadAllFilesInOneRequest	是否合并上传	✅	✅
useMockProgress	是否展示模拟进度	✅	✅
withCredentials	上传是否携带 cookie	✅	IE版本 >= 10
onCancelUpload	点击取消上传	✅	✅
onChange	已上传文件列表发生变化	✅	✅
onDragenter	进入拖拽区域	✅	IE版本 >= 10
onDragleave	拖拽结束	✅	IE版本 >= 10
onFail	上传失败	✅	✅
onPreview	点击预览	✅	IE9浏览器需上传完成后，后端返回文件URL给前端设置后方可使用, IE>9
onProgress	上传进度发生变化时触发	✅	IE版本 >= 10
onRemove	删除文件时触发	✅	✅
onSelectChange	文件选择后触发	❌	❌
onSuccess	文件上传成功后触发	✅	✅
showSize	列表模式是否展示文件大小列	❌	✅

IE 兼容服务端协议说明

• IE9 浏览器不支持application/json解析，当服务端返回 json 数据 IE9 浏览器下会当成文件下载，需要后端做浏览器兼容响应
• 所以 IE9 浏览器服务响应需设置content-type类型为：text/plain 或 text/json

IE9 IE10	IE10, IE11
text/plain text/json	application/json

# python flask
user_agent = request.headers.get('User-Agent')
if user_agent.browser == 'MSIE' and user_agent.version == '9':
  response.setHeader('content-type', 'text/json')
else:
  response.setHeader('content-type', 'application/json')

IE 浏览器兼容支持

IE9	IE10	IE11	edge
✅	✅	✅	✅

accept

不支持 audio/_ video/_ 设置

Value	Description
file_extension	gif,jpg,png,exe,doc,xml 文件后缀设置
image/*	图形文件
image/type	image/gif image/png 单个图形文件类型

// 图形文件支持类型
export const ImageAccept = [
  'jpg',
  'png',
  'gif',
  'bmp',
  'webp',
  'jpeg',
  'svg',
  'pcx',
  'wmf',
  'dxf',
  'cgm',
  'xpm',
  'tif',
  'tiff',
  'avci',
  'avcs',
  'avif',
  'avifs',
];

headers

IE9	IE10, IE11
request.body	request.header

sizeLimit

IE9	IE10, IE11
前端不可验证，需服务端验证	前端可验证

requestMethod 参数对比

参数	IE9	IE10, IE11
file	前端构建的 file 对象	event.target.file
ieUpload	uploadIe form 表单对象	null

requestMethod(file, ieUpload = null) {
  return new Promise(function(resolve, reject) {
    if (ieUpload) {
      const { uploadIe } = ieUpload;
      uploadIe.form.submit()
    }
  })
}