# 指令
vue 指令 官方文档 (opens new window)，在阅读本文档前，请对该方法的使用有一定了解。
# 介绍
该指令实现点击复制文字效果，关于 clipboard 更多用法，请查看官网文档 (opens new window)
# 目录结构
└─ src
└─ directive
└─ Clipboard # 复制
├─ index.js # 注册指令
└─ Clipboard.js # 定义指令
# 安装
npm install clipboard --save
# 源码分析
# 指令实现
import Clipboard from "clipboard"; // 引入 copy 插件
import { Message } from 'element-ui'; // 引入提示组件
export default {
bind(el, binding = {}, vnode) {
// 设置鼠标 hover 显示 cpoy 样式
el.style.cursor = 'copy';
// 实例化 copy 插件
const clipboard = new Clipboard(el, {
text: () => binding.value;
})
// 复制成功提示
clipboard.on('success', e => {
Message.success("已复制到剪切板");
})
// 复制失败提示
clipboard.on('error', e => {
Message.success("复制失败");
})
},
//
update(el, binding) {
el.__clipboard__.text = () => binding.value
},
// 卸载绑定
unbind(el, binding) {
el.__clipboard__.destroy();
delete el.__clipboard__;
}
}
# index.js
引入 Clipboard 并导出安装 vue 方法，指令名称为 copy
import Clipboard from './Clipboard.js'
export default {
install (Vue) {
Vue.directive('copy', Clipboard)
}
}
# 引入到 main.js
import Clipboard from "./directive/Clipboard/index.js";
Vue.use(Clipboard)
# 使用
<div v-copy="'copy message'">Copy Message</div>