1.下載clipboard.js
cnpm install clipboard --save
2.引入,可以在mian.js中全局引入也可以在單個vue中引入
import Clipboard from 'clipboard';
3.使用,在template中,這里我用了elementui框架
<el-table-column label="taskId"> <template slot-scope="scope"> <el-tooltip placement="top"> <div slot="content">點擊復制</div> <span style="display:block;cursor:pointer;width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" class="tag-read" :data-clipboard-text="tableData[scope.$index].taskId" @click="copy">{{tableData[scope.$index].taskId}}</span> </el-tooltip> </template> </el-table-column>
4.使用,在methods中
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
success("復制成功");//這里你如果引入了elementui的提示就可以用,沒有就注釋即可
// 釋放內存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持復制
console.log('該瀏覽器不支持自動復制')
// 釋放內存
clipboard.destroy()
})
},
5.最后效果:點擊后直接可以在控制台進行粘貼
--------------------------》》》》》
6.如果需要在main.js中引入
//引入剪切板插件clipboard;
import Clipboard from 'clipboard';
Vue.prototype.Clipboard=Clipboard;
vue組件中
copy() {
var clipboard = new this.Clipboard('.tag-read');
clipboard.on('success', e => {
success("復制成功");
// 釋放內存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持復制
console.log('該瀏覽器不支持自動復制')
// 釋放內存
clipboard.destroy()
})
},