js vue 在el-tooltip中使用clipboard.js复制失效问题如何解决

Question

DOM：

<el-tooltip effect="light" placement="right">
        <span> 鼠标移上显示tooltip </span>
        <template slot="content">
            <p>
                <span style="font-weight: 700;color: rgb(51, 51, 51);margin-right: 8px">复制的内容:</span>
                <span>aaaaaaaa</span>
                <i data-clipboard-text="aaaaaaaa"
                   ref="copyDomain"
                   class="el-icon-document-copy copy-text"
                   @click="onCopyClick">
                </i>
            </p>
        </template>
    </el-tooltip>

JS
import Clipboard from "clipboard";

        data() {
            return {
                copyMessageClose: true
            }
        },

        onCopyClick() {
                console.log("a")
                if (this.copyMessageClose) {
                    this.copyMessageClose = false;
                    const _this = this;
                    console.log("b")
                    let clipboard = new Clipboard(".copy-text")
                    clipboard.on("success", e => {
                        console.log("c")
                        this.$message({
                            message: "复制成功",
                            type: "success",
                            onClose: function () {
                                _this.copyMessageClose = true;
                            }
                        });
                        clipboard.destroy();
                    });
                    clipboard.on("error", e => {
                        console.log("该浏览器不支持自动复制");
                        clipboard.destroy();
                    });
                }
            },

Answer 1

官网有说明