小盒子可以在大盒子里面移动

项目中遇到这样的一个问题，就是一个图片超出了盒子的范围，那么就可以移动鼠标查看，自己就动手写了一个，就在这里做个笔记

                                                                                                                                                                            

效果图是这样的主页有视频效果

多说无益，直接上代码

在template上写上两个容器

然后给两个容器写样式

js方面我是封装成了一个共用的方法，你们也可以根据自己的喜欢写在vue的组件中，

这样就完成了，如果大家也遇到同样的问，那么就可以试试我这个写法，感觉还是很受用的

忘记给代码出来了

<template>

  <div class="moveBox">

    <div class="moveItem" id="moveme">

      <img src="@/assets/img/empty-storage.png" alt="" />

    </div>

  </div>

</template>

<script>

import { handleMove, keyDown } from '@/utils/utils'

import '@/utils/global'

export default {

  name: 'AanT',

  components: {},

  data() {

    return {

      wsUrl: 'xxxx/ws/xxxx/ws/dem/',

      websock: null,

    }

  },

  created() {},

  mounted() {

    keyDown()

    let dom = document.getElementById('moveme')

    handleMove(dom)

  },

  computed: {

    date1() {

      return this.date != '' && this.msg != ''

    },

  },

  watch: {},

  methods: {

    initWebSocket() {

      let randomNum = Math.round(Math.random() * 100)

      //初始化weosocket

      const wsuri = 'ws://' + this.wsUrl + randomNum

      this.websock = new WebSocket(wsuri)

      this.websock.onmessage = this.websocketonmessage

      this.websock.onopen = this.websocketonopen

      this.websock.onerror = this.websocketonerror

      this.websock.onclose = this.websocketclose

    },

    // 连接建立之后执行send方法发送数据

    websocketonopen() {

      console.log('连接成功')

    },

    //连接建立失败重连

    websocketonerror() {

      console.log('连接失败，重新连接')

      //   this.initWebSocket()

    },

    //数据接收

    websocketonmessage(e) {

      console.log(e)

      if (e.data != '连接成功') {

        this.msg = JSON.parse(e.data).msg // 前端弹框展示的内容为后端返回的信息，具体内容具体分析

        this.date = JSON.parse(e.data).date // 前端弹框展示的内容为后端返回的信息，具体内容具体分析

        // setTimeout(() => {

        //   this.getInfo() // 某某某接口的调用方法

        //   console.log('收到数据')

        // }, 3000)

      }

    },

    //数据发送

    websocketsend(Data) {

      this.websock.send(Data)

    },

    //关闭 websocket

    websocketclose(e) {

      console.log('断开连接,重新连接', e)

    },

  },

  beforeCreate() {}, //生命周期 - 创建之前

  beforeMount() {}, //生命周期 - 挂载之前

  beforeUpdate() {}, //生命周期 - 更新之前

  updated() {}, //生命周期 - 更新之后

  beforeDestroy() {}, //生命周期 - 销毁之前

  destroyed() {

    // this.websock.close()

  }, //生命周期 - 销毁完成

  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

}

</script>

<style lang="less" scoped>

.moveBox {

  width: 300px;

  height: 240px;

  margin: 20px auto;

  overflow: hidden;

  //   border: 2px #ebebeb solid;

  position: relative;

  .moveItem {

    width: 600px;

    position: absolute;

    top: 0;

    left: 0;

    line-height: 36px;

    padding: 12px;

    background: linear-gradient(to top right, #04f324, #f7f702);

    img {

      width: 600px;

      height: 600px;

      cursor: pointer;

    }

  }

}

</style>