vue使用实现按键修饰符.up,.down,.left,.right操作图片上下左右移动

我们可以使用Vue的指令来实现按键修饰符的功能。首先，我们需要在元素上绑定keydown事件，然后在事件处理函数中判断按下的按键。如果按下的是修饰符键和方向键，就执行相应的操作。

下面是实现按键修饰符.up,.down,.left,.right操作图片上下左右移动的示例代码：

<template>
  <div>
    <img ref="img" src="./img.png" :style="{top: top + 'px', left: left + 'px'}">
  </div>
</template>

<script>
export default {
  data() {
    return {
      top: 0,
      left: 0
    }
  },
  directives: {
    move: {
      bind(el, binding, vnode) {
        const img = vnode.context.$refs.img;
        const step = binding.value || 10;
        let top = img.offsetTop;
        let left = img.offsetLeft;

        el.addEventListener('keydown', (e) => {
          if (e.shiftKey && e.keyCode === 38) { // shift + up
            top -= step;
          } else if (e.shiftKey && e.keyCode === 40) { // shift + down
            top += step;
          } else if (e.shiftKey && e.keyCode === 37) { // shift + left
            left -= step;
          } else if (e.shiftKey && e.keyCode === 39) { // shift + right
            left += step;
          }

          img.style.top = top + 'px';
          img.style.left = left + 'px';
        });
      }
    }
  }
}
</script>

<style>
  img {
    position: absolute;
  }
</style>

在模板中，我们使用了一个img标签来展示图片，并绑定了一个指令move。在指令的bind钩子函数中，我们获取了img标签的引用，并根据binding.value来确定移动的步长。在keydown事件处理函数中，我们判断了按下的键是否是修饰符键和方向键，并根据相应的操作来更新图片的top和left样式。

最后，我们需要在父组件中引入并使用该组件，例如：

<template>
  <div>
    <move-img></move-img>
  </div>
</template>

<script>
import MoveImg from './MoveImg.vue';

export default {
  components: {
    MoveImg
  }
}
</script>

这样，我们就可以在页面上看到一张图片，并且可以通过按键修饰符.up,.down,.left,.right来控制图片的上下左右移动了。