在做VUE开发前台用户的时候,对于订单编号,合同编号,增加一个一键复制的功能,往往能够极大的提升用户体验。
第一步:安装 v-clipboard
#使用npm安装: npm install --save v-clipboard #使用yarn安装 yarn add v-clipboard
第二步:全局引入 main.js
import Vue from 'vue' import Clipboard from 'v-clipboard' Vue.use(Clipboard)
第三步:具体使用
<template> <button v-clipboard="some text"> copy </button> </template>
复制动态变量:
<template> <button v-clipboard="() => textToCopy"> Copy to clipboard </button> <p>{{ textToCopy }}</p> </template>
常见的应该是这种使用:
<template> <button v-clipboard="foo" v-clipboard:success="clipboardSuccessHandler" v-clipboard:error="clipboardErrorHandler"> Copy to clipboard </button> </template> <script> export default { methods: { // 复制 foo(){ return '你说的对'; }, // 复制成功回调函数 clipboardSuccessHandler ({ value, event }) { console.log('success', value) }, // 复制失败回调函数 clipboardErrorHandler ({ value, event }) { console.log('error', value) } } } </script>
打完收工!
标签:vue,value,textToCopy,---,clipboard,复制 From: https://www.cnblogs.com/e0yu/p/18211058