vue 点击按钮复制对应内容

不念不忘少年蓝@ 2023-01-11 09:07 192阅读 0赞

示例代码如下：

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue实现复制功能演示</title>
    </head>
    
    <body>
        <div id="dowebok">
            <h1>Vue实现复制功能演示</h1>
            <div>
                <input v-model="text" placeholder="请输入要复制的内容">
                <button @click="toCopy">复制</button>
            </div>
        </div>
    
        <script src="js/vue.min.js"></script>
        <script type="text/javascript">
        	var app = new Vue({
        el: '#dowebok',
        data: {
            text: '',
        },
        methods: {
            toCopy: function () {
                if (!this.text) {
                    alert('请输入要复制的内容')
                } else {
                	// createElement() 方法通过指定名称创建一个元素
                    var copyInput = document.createElement('input')
                    copyInput.setAttribute('value', this.text)
                    document.body.appendChild(copyInput)
                    copyInput.select()
    
                    try {
                        var copyed = document.execCommand('copy')
                        if (copyed) {
                            document.body.removeChild(copyInput)
                            alert('复制成功')
                        }
                    } catch {
                        alert('复制失败，请检查浏览器兼容')
                    }
                }
            }
        }
    })
        </script>
    </body>
    </html>

vue 点击按钮复制对应内容

发表评论取消回复

还没有评论，来说两句吧...

相关阅读