Vue使用vue-drag-resize生成悬浮拖拽小球
作者：ckw@ldy
这篇文章主要为大家详细介绍了Vue使用vue-drag-resize生成悬浮拖拽小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了使用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>四、展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。