如何使用Laravel Mix将Laravel9中的Javascript库与Vue集成

Question

对所有这些现代框架都是新的我试图让这个javascript库工作在我的Vue组件:https://clipboardjs.com

当Mix运行时，我可以看到它被集成到我的公共/js/app.js文件中-但我似乎无法从我的。vue(组件)文件中引用它

有没有人能给我一个一步一步的指南，关于如何让这个融入我的项目，请:

资源/js/app.js文件

import './clipboard'; 

剪贴板.js文件位于:

资源/js/clipboard.js

混合webpack.mix.js文件:

mix.js("resources/js/app.js", "public/js")
.js("resources/js/clipboard.js", "public/js")
.vue()
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);

我的Vue组件(方法部分):

<script>
export default {
props: ['mediaDetails'],
data() {
return {
}
},
methods: {
copyPassword() {
alert("copy");
var password = document.getElementById('#password');
alert('1');
var clipboard = new ClipboardJS(password);
alert('2');
}
}

由于剪贴板分配失败，警告('2')永远不会触发

Answer 1

1. 首先，在您的webpack.mix.js文件中，删除.js("resources/js/clipboard.js", "public/js")
行
2. 安装clipboard包:npm install clipboard
3. 在您的Vue组件中，导入包以便使用它:

<script>
import ClipboardJS from 'clipboard';
export default {
props: ['mediaDetails'],
data() {
return {
}
},
methods: {
copyPassword() {
alert("copy");
var password = document.getElementById('#password');
alert('1');
var clipboard = new ClipboardJS(password);
alert('2');
}
}

4. BTW你在document.getElementById('#password')中有一个打字错误，它应该是document.getElementById('password')