vue.js 前端 剪切板 一键复制 js实现一键复制 如何在一个传统的html中，引入vueJs并使用vue复制组件？

如何在一个传统的html中，引入vueJs并使用vue复制组件？

1.1 引言1.2 背景1.3 解决方案1.3.1 解决方案一：直接使用clipboard(不推荐仅供参考学习)1.3.2 解决方案二：封装指令js库后使用 (推荐)

1.1 引言

这篇博文主要分享如何在一个传统的html中，通过通过引入js方式使用vue功能和vue复制组件。

1.2 背景

项目是一个传统的前后端在一起的项目，前端框架使用的一些前端组件库是通过在html中引入bootstrap,vue 等JS实现。 无法使用包管理器，不支持import和export等语法，现在要求在这样的背景下，实现一键复制功能。

1.3 解决方案

我们知道在支持包管理器安装的vue项目中可以这样使用，有两种用法。

但是很显然第二种v-clipboard:copy="inputData" 使用方式更加优雅。

详细示例参见：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/clipboard/index.vue

那么在传统的html中引入js方式使用，又该如何改造呢？

1.3.1 解决方案一：直接使用clipboard(不推荐仅供参考学习)

封装简化下

clipboard_plugin_v1.js

// 定义自定义指令对象

const clipboardDirective = {

// 在 bind 钩子中初始化 Clipboard.js 实例

bind(el, binding) {

const clipboard = new ClipboardJS(el, {

text: () => binding.value,

});

clipboard.on('success', (e) => {

e.clearSelection();

// 触发成功复制事件，您可以在这里添加自定义处理逻辑

el.dispatchEvent(new Event('clipboard-success'));

});

clipboard.on('error', (e) => {

// 触发复制失败事件，您可以在这里添加自定义处理逻辑

el.dispatchEvent(new Event('clipboard-error'));

});

// 将 Clipboard.js 实例绑定到元素上以便后续销毁

el._clipboard = clipboard;

},

// 在 unbind 钩子中销毁 Clipboard.js 实例

unbind(el) {

const clipboard = el._clipboard;

if (clipboard) {

clipboard.destroy();

delete el._clipboard;

}

},

};

// 注册自定义指令

Vue.directive('clipboard', clipboardDirective);

html中使用示例

1.3.2 解决方案二：封装指令js库后使用 (推荐)

为了简化可以使用类似 v-clipboard:copy语法，这里我们除了引入剪切板js库之外，还需要封装下指令到一个js中。 因为只有封装后我们才能使用directives: { clipboardDirectiveV2 }, 这种语法来简化使用。

clipboard_plugin_v2.js

// clipboard_plugin_v2.js

// Inspired by https://github.com/Inndy/vue-clipboard2

const clipboardDirectiveV2 = {

bind(el, binding) {

if (binding.arg === 'success') {

el._v_clipboard_success = binding.value

} else if (binding.arg === 'error') {

el._v_clipboard_error = binding.value

} else {

const clipboard = new ClipboardJS(el, {

text: () => binding.value,

action() { return binding.arg === 'cut' ? 'cut' : 'copy' }

});

clipboard.on('success', e => {

const callback = el._v_clipboard_success

callback && callback(e) // eslint-disable-line

})

clipboard.on('error', e => {

const callback = el._v_clipboard_error

callback && callback(e) // eslint-disable-line

})

el._v_clipboard = clipboard

}

},

update(el, binding) {

if (binding.arg === 'success') {

el._v_clipboard_success = binding.value

} else if (binding.arg === 'error') {

el._v_clipboard_error = binding.value

} else {

el._v_clipboard.text = function() { return binding.value }

el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }

}

},

unbind(el, binding) {

if (binding.arg === 'success') {

delete el._v_clipboard_success

} else if (binding.arg === 'error') {

delete el._v_clipboard_error

} else {

el._v_clipboard.destroy()

delete el._v_clipboard

}

}

}

// 注册自定义指令

Vue.directive('clipboard', clipboardDirectiveV2);

然后在html中调用

好文阅读