I need to copy SQL from the Ajax response, but it seems the clipboard only allows a manual trigger.

It worked in Chrome90+ but doesn't work in Chrome69.

How do you write things to the clipboard in an asynchronous way in Chrome 69?

Here's the button which had opacity at 0:

<button id="SaveSql1" class="tag-read" :data-clipboard-text="sql" @click="copy">don't click me</button>

Here's the button that I click to get info from backend:

<div
    id="SaveSql"
    class="span_css"
    :data-clipboard-text="sql"
    @click.stop="selectSql('save',item)"
    >
      click Me
</div>

    async selectSql(action, item) {
      const params = {
        dbName: item.dbName,
        id: item.id,
        tableName: item.title,
        schemaName: item.schema
      }
      this.dataLoading = true
      try {
        const res = action === 'save' ? await tree.getSaveSql(params) : await tree.getDefaultSql(params)
        this.dataLoading = false
        this.sql = res.data.content
        const button = document.getElementById('SaveSql1')
        button.click()
        } catch (err) {
        this.$message.err(err)
      }
    },
    copy() {
      var clipboard = new Clipboard('.tag-read', () => { return this.sql })
      clipboard.on('success', e => {
        this.$message.success('success copy')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message.warning("the browser doesnt't allow copy")
        clipboard.destroy()
      })
    },