需求

项目中需要使用粘贴功能，将已复制的内容粘贴到输入框中。（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>

参考文章

JavaScript：实现复制粘贴剪切功能