前端小工具Vue+ElementUI+Clipboard ：快捷复制
<template>
<el-button
v-clipboard="copyContent"
v-clipboard:success="onCopySuccess"
v-clipboard:error="onCopyError"
type="primary"
icon="el-icon-document"
size="small"
>
复制链接
</el-button>
</template>
<script>
export default {
data() {
return {
copyContent: 'https://example.com'
};
},
methods: {
onCopySuccess() {
this.$message.success('链接已复制到剪贴板');
},
onCopyError() {
this.$message.error('复制失败，请手动复制');
}
}
};
</script>这个例子展示了如何使用Vue和ElementUI库中的el-button组件，以及Clipboard插件来实现一个复制到剪贴板的功能。用户点击按钮时，copyContent中的内容会被复制到剪贴板，复制成功会显示成功消息，复制失败会显示错误消息。
评论已关闭