vue怎样使用基于jquery的插件？

Z时代
2024-01-10
分类：技术分享

下面是原来的引入方式

<script type="text/javascript" src="https://segmentfault.com/q/1010000037729011/js/jquery.min.js"></script><script type="text/javascript" src="https://segmentfault.com/q/1010000037729011/js/jquery.ripples.js"></script>

下面是我在vue中的使用方式这样引入对吗 jquery已经用npm方式安装好了可是试了一下没有这个jquery效果怎么办？是不是jquery.ripples.js引入的方式不对 mounted中的代码就是原来js里面的全部代码
页面效果是这样的链接

<template>
<div class="index">
<img src="http://yueda-file.oss-cn-shenzhen.aliyuncs.com/457faaf4308b3c9c361e6b1f04fadfb0.png">
<div class="content">
<input placeholder="请输入用户名" class="ipt1" type="text">
<input placeholder="请输入密码" class="ipt2" type="text">
<div class="remember">
<div>
<input id="food_c" type="checkbox" name="food">
<label for="food_c">记住密码</label>
</div>
<div>
忘记密码?
</div>
</div>
<div class="login1">
</div>
<div class="login2">
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
import '../../static/jquery.ripples.js'
export default {
name: 'Index',
data () {
return {
}
},
mounted(){
$(document).ready(function() {
try {
$('body').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
});
}
catch (e) {
$('.error').show().text(e);
}
$('.disable').show().on('click', function() {
$('body').ripples('destroy');
$(this).hide();
});
});
}
}
</script>
<style scoped>
body{
height: 100vh;
width: 100%;
background-image: url(https://www.11-bian.com/tmpImg/7075a4390da44c2ab84a1a2dcbce3631.jpg);
}
.index{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-size: cover;
background-image: url(https://www.11-bian.com/tmpImg/7075a4390da44c2ab84a1a2dcbce3631.jpg);
height: 100vh;
width: 100%;
}
.content{
width: 736px;
height: 530px;
background-image: url(https://www.11-bian.com/tmpImg/df7c5aa79b9e5dd34a806843be40896a.png);
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
}
.ipt1{
margin-top: 150px;
width: 432px;
height: 32px;
border: 0;
outline: none;
padding-left: 4px;
box-sizing: border-box;
border-radius: 2px
}
.ipt1:focus {
outline:none;
border: 1px solid #3679DD;
}
.ipt2{
margin-top: 20px;
width: 432px;
height: 32px;
border: 0;
outline: none;
padding-left: 4px;
box-sizing: border-box;
border-radius: 2px
}
.ipt2:focus {
outline:none;
border: 1px solid #3679DD;
}
.remember{
display: flex;
justify-content: space-between;
width: 432px;
margin-top: 20px
}
</style>