vue3实现一键复制文本框内容

安装vue3-clipboard

npm install vue3-clipboard

上代码 

<template>
    <el-input v-model="textarea" disabled class="input-with-select">
        <template #append class="icon">
            <el-button :icon="CopyDocument" @click="handleCopy" />
        </template>
    </el-input>
</template>

<script setup>
    import { ref } from 'vue'
    import { CopyDocument } from '@element-plus/icons-vue'
    import { copyText } from 'vue3-clipboard'
    import { ElMessage } from 'element-plus'
    // 复制文本
    const textarea = ref('123445')
    const handleCopy = () => {
        console.log(123);
        if (textarea.value === '') {
            ElMessage.warning('请输入文本再复制');
            return
        }
        copyText(textarea.value, undefined, (error) => {
            if (error) {
                ElMessage.error(`复制失败: ${error} ！`);
            } else {
                ElMessage.success(`复制: ${textarea.value} 成功！`);
            }
        });
    }
</script>