Vue3实现复制功能

最新推荐文章于 2024-09-06 17:18:33 发布

北枳~

最新推荐文章于 2024-09-06 17:18:33 发布

阅读量1.5k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59006402/article/details/131787129

版权

npm add vue-clipboard3 -D

<template>
    ...
    <el-button link class="el-button--text" @click="onCopy">复制</el-button>
    ...
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import clipboard3 from 'vue-clipboard3'

// 解构方法
const { toClipboard } = clipboard3()

// 要复制的内容
let content = ref('')

const onCopy = async() => {
    try {
        await toClipboard(content.value)
        ElMessage({
            type: 'success',
            message: '复制成功!'
        })
    } catch (err) {
        console.error(err)
        ElMessage({
            type: 'error',
            message: '复制失败，请手动复制'
        })
    }
    
}
</script>

好用哦！！！！！