需求
项目中需要使用粘贴功能，将已复制的内容粘贴到输入框中。（vue项目使用elementUI，该粘贴功能是浏览器自带功能，属于通用功能）
效果
代码
html
<template>
<div class="box">
<el-input class="input-box" placeholder="请输入手机号" v-model="phoneNum" clearable>
<el-button slot="append" icon="el-icon-copy-document" @click="clickPaste"></el-button>
</el-input>
</div>
</template>
js
<script>
export default {
data() {
return {
phoneNum: ''
}
},
methods: {
// 点击复制
clickPaste() {
setTimeout(async () => {
try {
const text = await navigator.clipboard.readText()
console.log(text)
this.phoneNum = text // 如果只要数字加上后面这段代码 .replace(/[^\d]/g, '')
} catch (err) {
this.$message.error('当前无权限粘贴，请设置权限！')
}
}, 100)
}
}
}
</script>
css文章来源：https://www.toymoban.com/news/detail-821887.html
<style lang="scss" scoped>
.box {
width: 300px;
padding: 20px;
}
::v-deep .el-input-group__append {
padding: 0 20px;
}
</style>
参考文章
JavaScript：实现复制粘贴剪切功能文章来源地址https://www.toymoban.com/news/detail-821887.html
到了这里，关于js 粘贴功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
