vue+element-ui 项目中实现复制文字链接功能 - 潇湘羽西 - 博客园

安宇雨 - 随手采集
2021-08-06 12:30:29
随手采集
0000-未整理-等待研究

需求: 点击复制按钮,复制一个链接

在GitHub上找到一个clipboard组件,功能比较齐全

使用方法:

安装

npm i clipboard --save

HTML

; "复制代码")

<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>

; "复制代码")

js文件

; "复制代码")

// 引入
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()
  })
}

}
}

; "复制代码")

点击复制,成功,这样就复制成功了