1 在webpack.base.conf.js文件中如下配置 并且执行npm i jqery --save
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'scss_vars': '@/styles/vars.scss'
}
},
//引入jQuery 需要添加的配置文件
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
],
//.........................................
2 在需要用到jQuery的组件中
import $ from "jquery";
import "../../assets/ztree/js/jquery.ztree.core.js";
export default {
data() {
return {
},
3 在需要绑定点击事件的地方 进行绑定事件
<div id="span"><img src="../assets/images/zd-arrow-right.png" alt="" @click="toggleShow"></div>
首先定义一个开关
data() {
return {
flag: true,
}
},
然后点击的时候改变flag的值 对flag进行判断 补充一下jQuery
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
toggleShow() {
this.flag = !this.flag
console.log(this.flag)
if(!this.flag){
$('#buildType').animate({left:"435px"},'slow',function() {
$('#span')[0].style.transition = 'all 0.5s';
$('#span')[0].style.transform = 'rotate(180deg)';
})
}else {
$('#buildType').animate({left:"0"},'slow',function() {
$('#span')[0].style.transition = 'all 0.5s';
$('#span')[0].style.transform = 'rotate(360deg)';
})
}
}
js中的排他思想 两层for循环
var buildBox = $('#top_units')[0];
var lis = buildBox.children;
for(let i = 0; i< lis.length; i++){
lis[i].onclick = function() {
for(var j = 0;j < lis.length;j++){
lis[j].children[0].style.backgroundColor = '';
lis[j].children[1].style.color = '';
}
this.children[0].style.backgroundColor = '#2093EF';
this.children[1].style.color = '#2093EF';
}
}
注意一点 jQuery对象转换为js对象的几种转换方法 var buildBox = $('#top_units')[0];