Vue.js实现复制到粘帖板功能 - 会coding的HAM

Vue.js实现复制到粘帖板功能

BG7ZAG

|

2018-5-29 14:42

|

1,929

|

0

|

170 字

|

1 分钟内

插件官网：https://www.npmjs.com/package/vue-clipboard2

使用 vue-clipboard2 插件，首先安装插件：

npm install --save vue-clipboard2

对于 vue-cli 用户：

import Vue
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

对于独立使用：

<script src="vue.min.js"></script>
<script src="dist/vue-clipboard.min.js"></script>

template

<template id="demo">
<div class="container">
<input type="text" v-model="message">
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError"> 复制 </button>
</div>
</template>

script

<script>
new Vue({
el: '#app',
template: '#demo',
data: function () {
return {
message: ' 啦啦啦，这是复制的内容！'
}
},
methods: {
onCopy: function (e) {
console.log (' 你刚刚复制: ' + e.text)
},
onError: function (e) {
console.log (' 无法复制文本！')
}
}
})
</script>

Vue 复制

暂无评论

发送评论编辑评论

Markdown

悄悄话

邮件提醒

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!

本文最后更新于 2344 天前，其中的信息可能已经有所发展或是发生改变。