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

Question

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

\n

这是我的代码。

\n

  async handleClickUpload(origin: string) {\n    try {\n      this._setDocumentType({ origin });\n      const { code: documentCode } = this.currentDocument;\n\n      if (this._isDocumentBackVariant(documentCode)) {\n        await this._variantBackDocumentHandler();\n      }\n      this._handleUploadMethod();\n    } catch (e) {\n      console.error(e);\n    }\n  }\n

\n

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

\n

  async _variantBackDocumentHandler() {\n    const { variation } = await this.getSpecificDocument("cnh_rg_frente");\n\n    console.error("Encontrou varia\xc3\xa7\xc3\xa3o", variation);\n    if (!variation) {\n      this._setDocumentType({ open: true });\n      throw new Error("Varia\xc3\xa7\xc3\xa3o n\xc3\xa3o encontrada");\n    }\n    this._setDocumentType({ variation });\n  }\n

\n

在这种方法中，我选择是否打开用户相机或允许用户上传文件（在 Safari 上工作正常）。

\n

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

\n

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

\n

  _uploadInputHandler() {\n    const uploadInput: HTMLInputElement | null = document.querySelector("#uploadInput");\n\n    uploadInput?.click();\n  }\n

\n

这是我的输入

\n

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

\n

这是我的 .browserlistrc

\n

defaults\nnot IE 11\nmaintained node versions\nlast 10 ios_saf versions\nlast 10 safari versions\n

\n

这是我的 babel.config.js

\n

const plugins = () => {\n  const defaultPlugins = [\n    "@babel/plugin-proposal-optional-chaining",\n    "@babel/plugin-proposal-throw-expressions",\n    "@babel/plugin-syntax-throw-expressions",\n    [\n      "@babel/plugin-transform-runtime",\n      {\n        absoluteRuntime: false,\n        corejs: false,\n        helpers: true,\n        regenerator: true,\n        useESModules: false,\n      },\n    ],\n  ];\n  // if (process.env.NODE_ENV === "production") {\n  //   defaultPlugins.push("transform-remove-console");\n  // }\n  return defaultPlugins;\n};\n\nmodule.exports = {\n  presets: [\n    [\n      "@vue/cli-plugin-babel/preset",\n      {\n        polyfills: [\n          "es.array.iterator",\n          "es.promise",\n          "es.object.assign",\n          "es.promise.finally",\n          "es.symbol",\n        ],\n      },\n    ],\n  ],\n  plugins: plugins(),\n};\n\n

\n

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

\n

import "core-js/stable";\nimport "regenerator-runtime/runtime";\n

\n

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

\n

Answer 1

这是一个已知问题。

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

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

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

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