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