元素不会在鼠标下定位

Question

我建立了一个简单的拖动功能：

<div class="i-plane">
  <div class='i-interact' @mousedown='handleDown' :style='position'></div>
</div>

<script>
  data: {
    field: {
      x: 0,
      y: 0
    }
    position: {
      transform: 'translate(' + this.field.x + 'px,' + this.field.y + 'px) rotate(' + this.rotate + 'deg)'
    }
  },

  methods: {
    handleMove () {
      this.field.x = e.clientX
      this.field.y = e.clientY
    }
  }
</scrip>

我认为e.clientX和e.clientY会将i-interact放在光标下。但是，没有，它的位置下降：

将i-interact元素正确放置在光标下的正确方法是什么？

编辑：我试过这个：

// this.$el = <div class="i-interact">
this.field.x = e.clientX - this.$el.parentElement.offsetLeft
this.field.x = e.clientX - this.$el.parentElement.offsetTop

但i-interact元素仍显示在底部：

Answer 1

要动态分配样式，您必须在position变量中包含一个字符串。

您可以看到以下示例：

<强> HTML ：

<div id="demo">
  <span :style="colorStyle"> {{age}}  </span>
</div>

<强> JS ：

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        age: '132',
        colorStyle: 'color: red;'
      };
    }
})

查看工作小提琴here。

我看到你在另一个数据变量中使用数据变量是不可能的，你可以更好地使用计算属性这种情况，见下面的示例代码：

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        age: '132',
        color: 'red'
      };
    },
    computed: {
      colorStyle: function() {
         return 'color: ' + this.color + ';'
      }
    }
})

更新了提琴手here。