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>
四、展示
相关文章
Viveka
2020-07-31
Anne
2020-11-13
Claire
2021-05-21
Judy
2023-07-20
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20