js原生复制与clipboard复制

1. js原生复制

            原生js复制<br />

            <van-button class="test__btn" @click="copyother('传入了')"> js复制传入内容: 传入了 </van-button>

            <br />

            <van-button class="test__btn" @click="copyCode('form__tone')"> js复制隐藏文本内容: 我藏着 </van-button>

            <input id="form__tone" type="text" value="我藏着" class="text-hide" />

            <br />

            <van-button class="test__btn" @click="copyCode('form__tone2')"> js复制同步文本内容 </van-button>

            <input id="form__tone2" type="text" value="form_tone2" />

            <br />

            <div id="copy_file" ref="copyFile" @click="copyother()">点我自己复制自己，非input标签内容</div>

        </div>

 //-----------------------------原生js 复制 -----------------------------

        /** input 标签文本的复制
          idName: input标签的id
         * e dom
         * type = code 口令
         * type = url 链接
         */
        copyCode(idName) {
            let e = document.getElementById(idName)
            let NValue = e.value
            let valueLength = NValue.length
            e.select()
            this.selectText(e, 0, valueLength)
            document.execCommand('Copy')
            this.$toast('已复制好，可贴粘。')
        },

        // 复制非input标签内容或者传入内容 原理是创建一个input标签，来实现复制
        copyother(copyValue) {
            let copy_file = ''
            if (copyValue) {
                copy_file = copyValue
            } else {
                copy_file = this.$refs.copyFile.innerText
                //  const copyDom = document.getElementById('copy_file')
                // var copy_file = copyDom.getAttribute('href') //a标签的href
            }
            const input = document.createElement('input')
            document.body.appendChild(input)
            input.setAttribute('value', copy_file)

            let NValue = input.value
            let valueLength = NValue.length
            input.select()
            this.selectText(input, 0, valueLength)
            document.execCommand('Copy')
            this.$toast('已复制好，可贴粘。')
            document.body.removeChild(input)
        },
        // 选择内容
        selectText(textbox, startIndex, stopIndex) {
            if (textbox.createTextRange) {
                let range = textbox.createTextRange()
                range.collapse(true)
                range.moveStart('character', startIndex) // 起始光标
                range.moveEnd('character', stopIndex - startIndex) // 结束光标
                range.select()
            } else {
                textbox.setSelectionRange(startIndex, stopIndex)
                textbox.focus()
            }
        },

Clipboard.js 复制

官网：https://clipboardjs.com/

1. 在Vue中引入 clipboard => npm install clipboard --save

 2. 在需要使用的组件中import 引入clipboard => import Clipboard from 'clipboard'

 

使用参考：

https://blog.csdn.net/qq_24147051/article/details/106908326

        <div class="test__item">
            Clipboard复制<br />
            <!--第一种直接绑定在按钮上-->
            <van-button class="test__btn clipboard-btn" :data-clipboard-text="1" @click="copyOriginal()">
                复制绑定在按钮上的内容：1
            </van-button>
            <br />
            <!-- 按钮传入 -->
            <van-button class="test__btn clipboard-btn" @click="clipboardCopyCode($event, '传入文本')">
                Clipboard复制：传入文本
            </van-button>
            <br />
            <!--第二种单个复制按钮动态获取需要复制的内容-->
            <van-button
                data-clipboard-action="copy"
                data-clipboard-target="#copy_text"
                class="test__btn clipboard-btn"
                @click="copyOriginal"
            >
                Clipboard动态复制input内容
            </van-button>
            <van-button class="test__btn clipboard-btn" @click="clipboardCopyCode($event, '', 'copy_text')">
                动态复制input标签内容
            </van-button>
            <input id="copy_text" v-model="copyContent" type="text" />
            <van-button class="test__btn clipboard-btn" @click="clipboardCopyCode($event, '', '')">
                Clipboard复制非input标签内容
            </van-button>
            <p ref="clipboardCopyFile">非input标签内容</p>
        </div>

        //----------------------------- Clipboard.js 复制 -----------------------------
        copyOriginal() {
            var clipboard = new Clipboard('.clipboard-btn')
            clipboard.on('success', e => {
                // console.log('复制成功', e)
                this.$toast('复制成功')
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                this.$toast('手机权限不支持复制功能')
                console.log('该浏览器不支持自动复制')
                // 释放内存
                clipboard.destroy()
            })
        },
        /**
         * e:$event
         * text: 要复制的文本内容
         * domID: 要复制的标签id
         */
        clipboardCopyCode(e, text, domID) {
            if (!text) {
                if (domID) {
                    const input = document.getElementById('copy_text')
                    text = input.value
                } else {
                    text = this.$refs.clipboardCopyFile.innerText
                }
            }
            const clipboard = new Clipboard('.clipboard-btn', {
                text: () => text
            })
            clipboard.on('success', () => {
                this.$toast('复制成功！')
                clipboard.off('error')
                clipboard.off('success')
                clipboard.destroy()
            })
            clipboard.on('error', () => {
                this.$toast('复制失败！')
                clipboard.off('error')
                clipboard.off('success')
                clipboard.destroy()
            })
            clipboard.onClick(e)
        }
    }