VueJS点击链接复制文本后替换alert显示Div/Flash消息提示的实现方法

架构老林

2026-10-6

实现方案

方案1：组件内局部提示（最简实现）

第一步：修改模板，新增提示容器

在原有模板基础上增加提示显示的div，通过响应式状态控制显隐：

<a @click="copyURL" ref="mylink">
  <img class="social_icon" src="/images/game/copy.png" alt="复制链接"/>
</a>
<input type="text" class="copyurl_txt" value="https://sample.site/" ref="text"></input>
<!-- 新增复制成功提示 -->
<div v-if="showCopyTip" class="copy-tip">链接复制成功</div>

第二步：修改script逻辑，替换alert为状态控制

<script>
export default {
  // 新增响应式状态
  data() {
    return {
      showCopyTip: false
    }
  },
  methods: {
    copyURL() {
      this.$refs.text.select();
      document.execCommand('copy');
      // 显示提示
      this.showCopyTip = true
      // 3秒后自动隐藏提示
      setTimeout(() => {
        this.showCopyTip = false
      }, 3000)
    }
  },
};
</script>

第三步：可选，添加提示样式

可以根据需求自定义提示样式，示例为右上角悬浮提示：

.copy-tip {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 4px;
  color: #166534;
  z-index: 999;
}

如果需要更稳妥的复制兼容性，可替换原有复制逻辑为新版Clipboard API：

async copyURL() {
  const copyText = this.$refs.text.value
  await navigator.clipboard.writeText(copyText)
  this.showCopyTip = true
  setTimeout(() => this.showCopyTip = false, 3000)
}