原创

极简的剪切板组件

不再用 clipboard.js 了,所以:

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<!-- 这就是剪贴板载体,想办法视觉隐藏就可以 --> <input type="text" v-model="clipboardText" class="clipboard-input" ref="clipboard"> <button @click="copyToClipboard('123')"></button> <button @click="copyToClipboard('abc')"></button> <button @click="copyToClipboard('789')"></button>
              
  • 1
  • 2
  • 3
  • 4
.clipboard-input { height: 0px; opacity: 0; }
              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
export default { data() { return { clipboardText: '' } }, methods: { copyToClipboard(text) { console.log('要复制这个文本:', text) this.clipboardText = text // $nextTick 在这里没用 setTimeout(() => { this.$refs.clipboard.select() document.execCommand('Copy') }) } } }

好,完

本文于 2018/1/5 下午 发布在 宁静寺 分类下,当前已被围观 1112 次

相关标签:Web开发VueJavascript

永久地址:https://surmon.me/article/80

版权声明:自由转载-署名-非商业性使用  |  Creative Commons BY-NC 3.0 CN