需求
项目中需要使用粘贴功能，将已复制的内容粘贴到输入框中。（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
<style lang="scss" scoped>
.box {
width: 300px;
padding: 20px;
}
::v-deep .el-input-group__append {
padding: 0 20px;
}
</style>
