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

Question

我有一个按钮，当被点击/按下时，会触发的click()事件，允许用户上传文件。在每个平台上都能正常工作，但有时候我需要在打开上传窗口之前先发送请求，在大多数平台上都能正常工作，但在Safari / IOS Safari上不行，在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();
    }
  }

我在这里触发了一个隐藏输入框的点击事件，已经通过控制台输出常量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";

这种方法在所有浏览器上都能正常工作，但是当我需要在IOS Safari上点击之前发送请求时，它就无法工作了，而在其他浏览器上可以。

- João Vitor

Answer 1

这是一个已知问题。

出于安全原因，Safari不会在以下元素上注册click事件：

• visibility: hidden;
• opacity: 0
• display: none
• 或者它们不是“有效的点击目标” - 这是一个他们一直在尝试解决的宽泛概念，但例如，他们不认为没有href属性的<a>元素是一个有效的点击目标。这意味着在<a href>上的点击有效，但在<a>上的点击无效。通过苹果的标准，undefined的href属性增加了点击目标的有效性。

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

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

- tao