开发中的坑（持续更新）

1、更改vant ui轮播方向

yarn add vue-directive-touch

<van-swipe ref="swipeInfo" v-touch:up="onSwipeLeft" v-touch:down="onSwipeRight" class="my-swipe" :initial-swipe="current" indicator-color="white" :show-indicators="false"
                   @change="onChange">

单击： v-touch:tap
长按： v-touch:long
左滑： v-touch:left
右滑： v-touch:right
上滑： v-touch:up
下滑： v-touch:down

 

      onSwipeLeft(){
        this.$refs.swipeInfo.next()
      },
      onSwipeRight(){
        this.$refs.swipeInfo.prev()
      }

 2、关于引用第三方的js

方法1：放入 static/utils  在index.html里面引用

方法2：放到 src/utils 目录下，然后在main.js引用

import * as touchs from './utils/touch.min'

Vue.prototype.$touchs=touchs

使用的地方

let target = document.querySelector('.perspective')
this.$touchs.touch.on(target, 'swipeleft swiperight', function(ev){
        console.log("you have done", ev.type);
});

 获取移动端缩放倍数

  let target = document.querySelector('.div');

  target.style.webkitTransition = 'all ease 0.05s';
  touch.on(target, 'touchstart', function(ev){
  });

  let initialScale = 1;
  let currentScale;

  touch.on(target, 'pinchend', function(ev){
    currentScale = ev.scale - 1;
    currentScale = initialScale + currentScale;
    // currentScale = currentScale > 1.2 ? 1.2 : currentScale;
    currentScale = currentScale < 1 ? 1 : currentScale;
    // this.style.webkitTransform = 'scale(' + currentScale + ')';
    console.log("当前缩放比例为:" + currentScale);
  });
  touch.on(target, 'pinchend', function(ev){
    initialScale = currentScale;
  });

3、在使用three.js raycaster时  怎么避免透过上层div选择到物体

在  Raycaster 点击事件中增加下面判断

if (!(e.target instanceof HTMLCanvasElement)) {
       return
}

 4、增加div水印层，透过div点击下面的元素

pointer-events:none

 5、tooltip被遮挡

 

        tooltip: {
          trigger: 'axis',
          position: function(point, params, dom, rect, size) {
            dom.style.transform = 'translateZ(0)'
          },
          // 跟随鼠标，不跑出div
          confine: true
        },