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)

相关推荐

  • 基于Vue实现拖拽效果

    效果图 demo1.gif 分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY

  • vue实现悬浮球效果

    vue实现悬浮球效果

    本文实例为大家分享了vue实现悬浮球效果的具体代码,供大家参考,具体内容如下 小球效果 小球移动效果图源码 <template>   <transition>     <div       ref="breathing_lamp"       class="breathing_lamp"       @click="onclick()"       @touchstart.stop="handleTouch

  • vue实现带自动吸附功能的悬浮球

    vue实现带自动吸附功能的悬浮球

    本文实例为大家分享了vue实现带自动吸附功能的悬浮球,供大家参考,具体内容如下 封装的组件代码,可以引到页面直接使用 <template>   <div     ref="floatDrag"     class="float-position"     :style="{ left: left + 'px', top: top + 'px', zIndex: zIndex }"     @touchmove.prevent  

  • Vue自定义指令拖拽功能示例

    下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1

  • vue实现吸壁悬浮球

    本文实例为大家分享了vue实现吸壁悬浮球的具体代码,供大家参考,具体内容如下 最近接到一个需求,需要一个客服悬浮按钮,可以拖拽并吸壁到页面周边,我们一起看看吧 1.创建一个template,定义客服按钮,自定义v-drag指令 <template>   <div class="container">     <div       class="btn"       id="btn"       :style=&quo

  • vue悬浮可拖拽悬浮按钮的实例代码

    前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址 使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发 线上体验 使用 将 src/components文件夹下的s-icons组件放到你的组件目录下 使用组件 // template <template> <div> <

  • vue实现div拖拽互换位置

    本文实例为大家分享了vue实现div拖拽互换位置的具体代码,供大家参考,具体内容如下 template模板 <transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.c

  • 基于Vue实现拖拽功能

    基于Vue实现拖拽功能

    本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: <div id="box"> 位置 <br>x:{{val.x}} <br>y:{{val.y}} <div v-drag="greet" id="drag" :style="style"> //注意这里要通过指令绑定函数将当前元素的位置数据传出来 </div> &l

  • vue使用drag与drop实现拖拽的示例代码

    在功能中有一项是需要实现拖拽的.虽然最终项目没有采取这样的拖拽方式,但是,当初也是费了九牛二虎之力完成了这个功能.增加了对函数的更深理解.下面就再重现一下代码. 下面是代码片段: <div class="fav-fold-panel" v-if="!typeChange" draggable="true" @dragstart="drag($event)" @dragover="allowDrop($event

  • Vue.Draggable实现拖拽效果

    快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":

随机推荐