$Copy 复制到剪贴板

概述

调用式组件，将传入的一段文本复制到剪贴板。并自带提示功能。

代码示例

基本用法

设置 text 属性即可将指定内容复制到剪贴板。如有必要，可以进行更多配置，详见 API。

<template>
    <div>
        <Input type="textarea" v-model="value" />
        <Button @click="handleCopy">复制</Button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value: '随意输入内容，点击复制按钮'
            }
        },
        methods: {
            handleCopy () {
                this.$Copy({
                    text: this.value
                })
            }
        }
    }
</script>

Expand Copy Copy

回调

success 回调可以在复制成功时触发。

<template>
    <div>
        <Input type="textarea" v-model="value" />
        <Button @click="handleCopy">复制</Button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value: '随意输入内容，点击复制按钮'
            }
        },
        methods: {
            handleCopy () {
                this.$Copy({
                    text: this.value,
                    success: () => {
                        this.$Notice.success({
                            title: '复制成功的回调'
                        })
                    },
                    error: () => {
                        this.$Notice.error({
                            title: '复制失败的回调'
                        })
                    }
                })
            }
        }
    }
</script>

Expand Copy Copy

API

$Copy Params

属性	说明	类型	默认值
text	要复制的文本	String	-
showTip	是否显示提示弹窗	Boolean	true
successTip	复制成功时的提示文案	String	复制成功
errorTip	复制失败时的提示文案	String	复制失败
success	复制成功时的回调	Function	-
error	复制失败时的回调	Function	-