Nuked: Probably Microwaved

    @wecity/tdesign-vue-ie

    0.0.16 • Public • Published

    @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
    • 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-layoutclass .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/plaintext/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()
        }
      })
    }

    Install

    npm i @wecity/tdesign-vue-ie

    DownloadsWeekly Downloads

    709

    Version

    0.0.16

    License

    MIT

    Unpacked Size

    3.67 MB

    Total Files

    40

    Last publish

    Collaborators

    • zystylish
    • brian_zhang
    • legendlu
    • fenfeizeng
    • colinczhu
    • easonruan
    • yikazhu
    • daniel-dx
    • domy
    • delenzhang
    • vickiliang
    • derrickliu
    • xiaoyaojones
    • smileswlin
    • jillysong
    • allennzhang
    • sharryliao
    • pechelhuang
    • phspan