Vue使用vue-drag-resize生成悬浮拖拽小球

cnpm install  vue-drag-resize

import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)

<template>
  <vue-drag-resize id="moreModal"
                   :isResizable="false"
                   :w="50"
                   :h="50"
                   :x="100"
                   :y="100"
                   :z="10000"
  ></vue-drag-resize>
</template>

<script>
export default {
  name: "FloatBall"
}
</script>

<style scoped>

#moreModal {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #337AB7;
  line-height: 40px;
  text-align: center;
  color: #fff;
  opacity: 0.6;
  animation: light 2s ease-in-out infinite alternate;
  cursor: pointer
}
@keyframes light {
  from {
    box-shadow: 0 0 4px #1f8cfa;
  }
  to {
    box-shadow: 0 0 20px #1f8cfa;
  }
}
#moreModal.active:before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  outline: none;
}
</style>