本文实例为大家分享了使用Vue-drag-resize生成悬浮拖拽小球的具体代码,供大家参考,具体内容如下 一、下载依赖 cnpm install vue-drag-resize
本文实例为大家分享了使用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>
--结束END--
本文标题: Vue使用vue-drag-resize生成悬浮拖拽小球
本文链接: https://www.lsjlt.com/news/146264.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0