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

最新推荐文章于 2023-04-24 14:08:09 发布

原创最新推荐文章于 2023-04-24 14:08:09 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #js

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在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';
        }
      }