H5移动端点击按钮复制文本到粘贴板

最新推荐文章于 2024-07-09 16:46:58 发布

原创最新推荐文章于 2024-07-09 16:46:58 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

前端专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何在H5移动端实现点击按钮复制文本的功能，借助于clipboard.js库。用户需要注意，复制的文本必须来自input或textarea，对于其他元素，需要设置一个隐藏的textarea作为中介。详细步骤包括引入库、npm安装以及样式调整。

前端H5移动端点击按钮文本信息
在这里插入图片描述
使用开源项目 clipboard.js，
官网：https://clipboardjs.com/
可以通过script标签引入
也可以通过npm安装，npm install clipboard.js --save-dev

(注:这个插件复制的对象必须是input 或者 textarea 里面的值。所以说你要是想复制p标签或者其他文本必须先设置一个input或者textarea作为中间过渡。html中写一个textarea标签，样式设置： opacity:0; z-index=-1;这样就可使隐藏这个没用的容器。)

<template>
    <div>
        <div style="margin-top:10px">
          <button @click="admanagement">查询全部相册名称</button>
        </div>
        <div class="adContainer">
            <div class="adList" v-for="(item,index) in photoList" :key="index">
                <div class="box">
                    <span :id="item.id">{{item.photoName}}</span>
                    <span class="el-icon-document-copy" id="codeBtn" data-clipboard-target="#input" @click="copyArticle(item)" style="float:right;font-size:20px;line-height:40px;margin-right:10px;"></span>
                </div>
            </div>
        </div>
        <Bottom/>
    </div>
</template>
<script>
import Bottom from "../../components/Bottom"
import { MessageBox }       from 'mint-ui'
import $ from "jquery"
export default {
    name:'ReceiptRecords',
    components:{
        Bottom
    },
    data(){
        return{
            photoList:[]
        }
    },
    methods: {
        copyArticle(item) {
            const range = document.createRange();
            range.selectNode(document.getElementById(item.id));
            const selection = window.getSelection();
            if(selection.rangeCount > 0) selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand('copy');
            MessageBox({
                title: '复制成功！',
                message: '<p style="width:100%;height:20px;line-height:20px;float:left;font-family:PingFangSC-Regular;font-size:14px;color:#999999;    letter-spacing: -0.23px;">是否要查看相册</p>',
                showCancelButton: true
            })
            .then(action => {
                if(action === 'confirm'){
                    this.$router.push({
                        path:'/home/admanagement', 
                        query: { 
                            photo_text: item.photoName
                        }
                    })
                }
            });
        },
        admanagement(){
            this.$fetch(this.ALLPHOTO_Host_POST,'post')
            .then((res) => {
                // console.log(res)
                if(res.status==200){
                    this.photoList=res.data
                }else{
                    this.$message.error("数据为空，请联系管理员")
                }
            })
            .catch(err => {
                console.log("错误")
            })  
        },
    }
}
</script>
<style lang="less" scoped>
.adContainer{
  overflow: hidden;
  width: 100%;
  .adList{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .box{
        width: 100%;
        height: 40px;
        line-height: 40px;
        float: left;
        background-color: rgba(0, 0,0, 0.5);
        font-size: 14px;
        margin-top: 20px;
    }
  }
}
</style>