Vue使用vue-drag-resize生成悬浮拖拽小球
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了使用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>四、展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
