项目中遇到这样的一个问题，就是一个图片超出了盒子的范围，那么就可以移动鼠标查看，自己就动手写了一个，就在这里做个笔记
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
效果图是这样的主页有视频效果
多说无益，直接上代码
在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>