源码搜藏网

本文实例为大家分享了使用vue-drag-resize生成悬浮拖拽小球的具体代码，供大家参考，具体内容如下

一、下载依赖

cnpm install vue-drag-resize

二、main.js引用

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>

四、展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。