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

来源：jb51　　时间：2022/4/18 10:10:49　　对本文有异议

本文实例为大家分享了使用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>