在vue中使用js排他思想 以及jQuery中的动画

本文介绍如何在Webpack项目中配置并使用jQuery,包括配置文件的设置、组件中jQuery的导入及动画效果实现方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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];


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值