Vue+elementui+clipboard实现点击按钮复制文本域内容

最新推荐文章于 2024-03-05 10:28:19 发布

AlterIt

最新推荐文章于 2024-03-05 10:28:19 发布

阅读量2.8k

点赞数

分类专栏：前端使用

本文链接：https://blog.csdn.net/growl_jie_/article/details/105454723

版权

前端使用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

结果如下：
示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css">
    <style>
        .el-row {
            margin-bottom: 20px;
        }

        .el-row:last-child {
            margin-bottom: 0;
        }
        #copyArea {
            position: absolute;
            width: 50%;

        }
        #copyText {
            position: relative;
            display: inline-block;
        }
        #copyBtn {
            /*display: inline-block;*/
            position: absolute;
            bottom: 5px;
            right: 1px;
        }
        /*html { overflow-x:hidden; }*/
        body {
            overflow-x:hidden;
            overflow-y:hidden;}

    </style>

</head>
<body >
<div id="app">
    <el-row :gutter="20">
        <el-col :offset="6" >
            <div id="copyArea">
                <el-input
                        id="copyText"
                        type="textarea"
                        :rows="30"
                        placeholder="请输入要复制的内容"
                        v-model="textarea">
                </el-input>
                <el-button round size="small" id="copyBtn" @click="clickCopyBtn(textarea, $event)"
                           data-clipboard-target="#copyText">复制
                </el-button>
            </div>
        </el-col>

    </el-row>




</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.6/clipboard.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                textarea: ' '
            }
        },
        methods: {
            clickCopyBtn: function (text, event) {

                const btnId = '#' + event.currentTarget.id;
                const clipboard = new ClipboardJS(btnId, {
                    text: () => text
                });
                // const clipboard = new ClipboardJS(event.target);

                clipboard.on("success", e => {

                    this.$message({
                        type: "success",
                        message: "复制成功",
                        duration: 300,
                        showClose: true,
                    }); //这里你如果引入了elementui的提示就可以用，没有就注释即可

                    // 释放内存

                    clipboard.destroy();

                });
                clipboard.on("error", e => {

                    // 不支持复制

                    this.$message({
                        type: "error",
                        message: "复制失败",
                        duration: 300,
                        showClose: true,
                    });
                    clipboard.destroy();

                });
            }
        }
    })
</script>
</html>

AlterIt

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue+elementui+clipboard实现点击按钮复制文本域内容

<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chal...
复制链接

扫一扫