<template>
<div class="info_item nomargin">
<p class="info_content">您的登录地址</p>
<p class="info_text link_text">
<!-- 需要复制的内容,需要指定一个id -->
<input class="text_link" type="text" id="link" :value="url" ref="link">
<!-- 复制按钮 -->
<button class="btn" @click="copyLink" data-clipboard-action="copy" data-clipboard-target="#link">复制
</button>
<!-- 复制成功/失败的提示 -->
<span class="message" v-show="isShow">{{word}}</span>
</p>
</div>
</template>
// 引入 import Clipboard from ‘clipboard‘ export default { data () { return { isShow: false, word: ‘success‘, url: ‘‘ } }, // 实例创建后,进行默认数据处理 created () { this.url = `${location.hostname}/#/login` }, // 方法集合 methods: { // 复制链接方法 copyLink () { let clipboard = new Clipboard(‘.btn‘) clipboard.on(‘success‘, e => { this.isShow = true this.word = ‘Success‘ setTimeout(() => { this.isShow = false }, 500) clipboard.destroy() // 使用destroy可以清楚缓存 }) clipboard.on(‘error‘, e => { this.word = ‘Fail‘ this.isShow = true setTimeout(() => { this.isShow = false }, 500) clipboard.destroy() }) } } }
原文：https://www.cnblogs.com/steamed-twisted-roll/p/11540766.html