PointerLock在vue中图片实例

1.新建一个pointerLock.js如下,之后引入到mian.js全局使用或者引入到当前组件页面都可以:)

const pointerLock = {}

pointerLock.pointerLockEvent = function (eleImage) {

  if (eleImage) {
    // 起始值
    var moveX = 0,
      moveY = 0;
    // 图片无限变换的方法
    var rotate3D = function(event) {
      moveX = moveX + event.movementX;
      moveY = moveY + event.movementY;

      eleImage.style.transform = 'rotateX(' + moveY + 'deg) rotateY(' + moveX + 'deg)';
    };

    // 触发鼠标锁定
    eleImage.addEventListener('click', function() {
      eleImage.requestPointerLock();
    });

    // 再次点击页面，取消鼠标锁定处理
    document.addEventListener('click', function() {
      if (document.pointerLockElement == eleImage) {
        document.exitPointerLock();
      }
    });

    // 检测鼠标锁定状态变化
    document.addEventListener('pointerlockchange', function() {
      if (document.pointerLockElement == eleImage) {
        document.addEventListener("mousemove", rotate3D, false);
      } else {
        document.removeEventListener("mousemove", rotate3D, false);
      }
    }, false);
  }

}


export default pointerLock

2.然后新建一个小组件imgPointerLock.vue,实例化作用于每一个图片

 //imgPointerLock.vue
<template>
  <div>
    <img :src="imgSrc" alt="" ref='eleImage'>
  </div>
</template>
<script>
import pointerLock from '@/utils/pointerLock'       //引入到当前组件内使用
let vm = this;
export default {
  name: "imgPointerLock",
  components: {

  },
  props: {
    src: {
      type: String   //图片地址
    }
  },

  data() {

    return {
      isLock: false,
      imgSrc:require(`@/assets/images/huaji.gif`)   //pointLock也支持gif图片动态效果哦~

    };
  },

  computed: {
    
  },
  created() {

  },
  mounted() {
    // console.log(this.$refs)
    pointerLock.pointerLockEvent(this.$refs.eleImage);   //调用传参并实例化

  },
  methods: {
  }
}

</script>
<style lang='postcss' scoped>
* {
  box-sizing: border-box;
}

img {
  display:block;
  vertical-align: middle;
  width:100%; 
  opacity:.9;
  box-shadow: 10px 10px 5px #eee;  
}

</style>

//使用
<img-pointer-lock v-for="(item,index) in imgArr" :src="item.imgSrc" :key='index'></img-pointer-lock>

3.ok辣,可以自己npm run dev 试试看. 另文章参考于这里

--by Affandi ⊙▽⊙