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>
四、展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)