Vue 2.6 在 Safari IOS 上无法正常工作

Posted 2023-03-14

【中文标题】Vue 2.6 在 Safari IOS 上无法正常工作

【英文标题】：Vue 2.6 not working correctly on Safari IOS

【发布时间】：2021-06-25 14:16:54

【问题描述】：

我有一个按钮，当被点击/按下时会在输入 type=file 上触发 click() 并允许用户要上传文件，它在每个平台上都可以正常工作，但有时我需要在打开上传窗口之前发出请求，当我需要发出请求时，它可以在除 Safari/IOS Safarai之外的所有平台上工作>，在 Safari 中发出了请求，我得到了响应，但没有触发输入 click()。

这是我的代码。

  async handleClickUpload(origin: string) 
    try 
      this._setDocumentType( origin );
      const  code: documentCode  = this.currentDocument;

      if (this._isDocumentBackVariant(documentCode)) 
        await this._variantBackDocumentHandler();
      
      this._handleUploadMethod();
     catch (e) 
      console.error(e);
    
  

在这里我提出请求并设置文档的变体，（在 Safari 上可以正常工作）

  async _variantBackDocumentHandler() 
    const  variation  = await this.getSpecificDocument("cnh_rg_frente");

    console.error("Encontrou variação", variation);
    if (!variation) 
      this._setDocumentType( open: true );
      throw new Error("Variação não encontrada");
    
    this._setDocumentType( variation );
  

在此方法中，我选择是打开用户相机还是允许用户上传文件（在 Safari 上运行良好）。

  _handleUploadMethod() 
    const  origin = ""  = this.documentType;
    if (origin === "camera") 
      this.cameraController.open = true;
     else 
      this._uploadInputHandler();
    
  

在这里我触发了隐藏输入的点击，我已经控制了 const uploadInput 并且它获取了元素（即使在 safari 中）。在每个浏览器上，它都会触发 click() 并打开一个窗口来上传文件，但在 Safari 上没有任何反应。

  _uploadInputHandler() 
    const uploadInput: htmlInputElement | null = document.querySelector("#uploadInput");

    uploadInput?.click();
  

这是我的意见

    <input
      id="uploadInput"
      @change="(event) => $emit('receiveFile', event)"
      type="file"
      style="visibility: hidden"
      accept="application/pdf, image/png, image/jpeg"
    />

这是我的 .browserlistrc

defaults
not IE 11
maintained node versions
last 10 ios_saf versions
last 10 safari versions

这是我的 babel.config.js

const plugins = () => 
  const defaultPlugins = [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-throw-expressions",
    [
      "@babel/plugin-transform-runtime",
      
        absoluteRuntime: false,
        corejs: false,
        helpers: true,
        regenerator: true,
        useESModules: false,
      ,
    ],
  ];
  // if (process.env.NODE_ENV === "production") 
  //   defaultPlugins.push("transform-remove-console");
  // 
  return defaultPlugins;
;

module.exports = 
  presets: [
    [
      "@vue/cli-plugin-babel/preset",
      
        polyfills: [
          "es.array.iterator",
          "es.promise",
          "es.object.assign",
          "es.promise.finally",
          "es.symbol",
        ],
      ,
    ],
  ],
  plugins: plugins(),
;

我的 main.ts 上有这两个导入

import "core-js/stable";
import "regenerator-runtime/runtime";

该方法在每个浏览器上都可以正常工作，但是当我需要在 click() 之前发出请求时，IOS Safari 上没有任何反应，而在其他浏览器上它可以工作。

【参考方案1】：

这是known issue。

Safari 以 security 的名义，不会在以下元素上注册 click 事件：

visibility: hidden; opacity: 0 display: none 或者不是“有效点击目标” - 这是他们一直在玩弄的一个松散概念，但例如，他们不认为没有href 属性的<a> 是有效点击目标。这意味着点击<a href> 有效，但点击<a> 无效。根据 Apple 标准，undefined href 增加了点击目标的有效性。

如果您希望用户能够单击“不可见”元素，请不要给该元素visibility: hidden。相反，将其不透明度更改为0.01。

旁注：您的问题与 Vue 无关。它可以在 React、Angular 或普通 JS 中重现。您可能希望将标题更改为“Web 在 Safari IOS 中无法正常工作”。