好用的前端插件一:(clipboard)--复制功能
现在很多地方在输入框后面都会带一个直接复制框内内容的功能,省去了选中内容进而ctrl+c的步骤。这个功能看起来好厉害,其实clipboard插件可以很轻易的实现。下面介绍如何在项目中使用该插件:
1、无论什么插件第一步都是先引入
yarn add clipboard yarn add @types/clipboard
2、在你需要用到的文件中引用
import ClipboardJS from clipboard;
3、最后就是如何使用了
<div class="search_contariner">
<el-input
placeholder="搜索"
clearable
v-model="searchInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<img @click="onclip" title="点击复制MD5" .class="copy" :data-clipboard-text="searchInput" src="@/assets/images/copy.jpg" alt="" >
private onclip() {
const _this = this
const clipboard = new ClipboardJS(.copy);
clipboard.on(success,(e: ClipboardJS.Event) => {
e.clearSelection();
_this.$message({
message:MD5值已复制到粘贴板,
type:success
})
});
clipboard.on(error, (e: ClipboardJS.Event) => {
_this.$message({
message:复制错误,请重新复制!,
type:error
})
});
}
看到贴出的代码是不是觉得超级好用啊?
