1.效果示例
2.依赖包下载
//这里用的是"vue-clipboard2": "^0.3.1"
npm install vue-clipboard2
//或者
yarn add vue-clipboard2
3.使用依赖
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard);
4.页面示例
<template>
<div style="margin:0px auto;width:300px">
<el-input v-model="link"></el-input>
<el-input v-model="text"></el-input>
<el-link type="text" style="color:#1E78FF;" v-clipboard:copy="link" v-clipboard:success="onSuccess" v-clipboard:error="onError">复制地址</el-link>
</div>
</template>
<script>
export default {
data() {
return {
link: 'http://www.baidu.com',
text: ''
}
},
methods:{
onSuccess(){
this.$message.success("内容已复制到剪切板")
},
onError(){
this.$message.warning("复制失败")
}
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/92396.html