vue实现按钮在屏幕的固定位置可以拖动

要实现按钮在屏幕的固定位置并且可拖动，需要使用Vue的指令和事件绑定。具体实现步骤如下：

1. 在Vue组件中定义一个按钮元素，并设置其样式为固定定位，例如：

<template>
  <button class="fixed-btn" v-draggable>按钮</button>
</template>

<style>
.fixed-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>

2. 定义一个自定义指令v-draggable用来实现按钮的拖拽功能，例如：

Vue.directive('draggable', {
  bind: function (el, binding, vnode) {
    el.style.position = 'absolute';
    el.style.cursor = 'move';
    el.addEventListener('mousedown', function (e) {
      let startX = e.clientX - el.offsetLeft;
      let startY = e.clientY - el.offsetTop;
      document.addEventListener('mousemove', move);
      document.addEventListener('mouseup', stop);
      function move (e) {
        el.style.left = e.clientX - startX + 'px';
        el.style.top = e.clientY - startY + 'px';
      }
      function stop () {
        document.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', stop);
      }
    });
  }
});

3. 在组件中引入该指令，并在按钮元素上使用该指令即可实现按钮的拖拽功能。

<template>
  <button class="fixed-btn" v-draggable>按钮</button>
</template>

这样按钮就可以在屏幕上固定位置并且可拖动了。需要注意的是，该功能只是实现了按钮的拖拽，如果需要将按钮的位置保存到后端或者在刷新页面后仍然保持按钮的位置，需要在拖拽结束时将按钮的位置信息发送到后端或者使用本地存储或Cookie等技术来保存位置信息。