Question

如何通过 @mousemove 方法将动态内容传递给 Vue v-bind:style

2021-03-26

221

vue.js nuxt.js

<div
  class="BgContainer"
  @mousemove="mouseMove"
  v-bind:style="{
    transform: 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)',
  }"
>

我正在尝试更新 mouseMove 函数上的 transform: matrix3d() 样式

methods: {
 mouseMove(event) {
  console.log(event.clientX, event.clientY)
 },
},

尝试学习 Vue (Nuxt.js)，我想知道根据鼠标位置更新此变换和更新 mouseMove 上的变换的最佳方法是什么。如何实现这样的效果，其中 newX 和 newY 根据鼠标位置动态变化？

v-bind:style="{
    transform: 'matrix3d(1.025,0,0,"newX",0,1.025,0,"newY",0,0,1,0,0,0,0,1)',
  }"

编辑 - 整个 vue 文件

<template>


<div class="prop_scroller">
    <div
      class="BgContainer"
      @mousemove="mouseMove"
      v-bind:style="{
        transform:
          'matrix3d(1.025,0,0,' +
          newX+
          ',0,1.025,0,' +
          newY +
          ',0,0,1,0,0,0,0,1)',
      }"
    >
      <i class="sacbg"> </i>
      <div class="after"></div>
    </div>
  </div>
</template>

<script>
import VanillaTilt from 'vanilla-tilt'
export default {
  data: function () {
    newX: 0
    newY: 0
  },
  mounted: function () {
    // VanillaTilt.init(this.$refs.bg)
    console.log(this.$refs)
  },
  methods: {
    mouseMove(event) {
      console.log(event.clientX, event.clientY)
    },
  },
}
</script>

<style lang="scss" scoped>
.prop_scroller {
  position: absolute;
  top: -50px;
  right: -70px;
  bottom: -60px;
  left: -50px;
  overflow: scroll;
}
.js-tilt-glare-inner {
  backface-visibility: hidden;
}
.BgContainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  // object-fit: cover;
  z-index: 300;
  backface-visibility: hidden;
  transform-style: preserve-3d;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  i {
    position: absolute !important;
    top: -70px !important;
    right: -70px !important;
    bottom: -60px !important;
    left: -60px !important;
    background-size: cover;
    background-position: center;
    background-image: url('~static/mural-bg.jpg');
  }
  .MuralBg {
    // animation: 1s appear;
    margin: auto;
    width: 100vw;
    height: auto;
  }

  .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(26, 33, 42, 0.2);
    animation: 1.2s fadeBgOut;
  }
}

@keyframes fadeBgOut {
  0% {
    background-color: rgba(26, 33, 42, 0.8);
  }
  100% {
    background-color: rgba(26, 33, 42, 0.2);
  }
}
</style>

Answer 1

尝试使用字符串模板文字：

v-bind:style="{
    transform: `matrix3d(1.025,0,0,${newX},0,1.025,0,${newY},0,0,1,0,0,0,0,1)`,
  }"

或通过连接：

v-bind:style="{
    transform: 'matrix3d(1.025,0,0,'+newX+',0,1.025,0,'+newY+',0,0,1,0,0,0,0,1)',
  }"

并且您的数据属性应该是一个返回对象的函数：

<script>
import VanillaTilt from 'vanilla-tilt'
export default {
  data: function () {
    return {
      newX: 0
       newY: 0
     }
  },
  mounted: function () {
    // VanillaTilt.init(this.$refs.bg)
    console.log(this.$refs)
  },
  methods: {
    mouseMove(event) {
      console.log(event.clientX, event.clientY)
      this.newX=event.clientX;
      this.newY=event.clientY;
    },
  },
}
</script>