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

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

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

多说无益，直接上代码

在template上写上两个容器

然后给两个容器写样式

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

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

忘记给代码出来了

</div>

</template>

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>

.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>

小盒子可以在大盒子里面移动相关推荐

【HTML+CSS】实现小盒子水平垂直居中大盒子
小div在大div中如何水平垂直居中关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: // 大盒子嵌套 ...
经典面试题：CSS定位知识及小盒子套大盒子的方法
一.页面布局 1.1页面布局分类 css网页布局的本质:就是在网页中排列盒子(标签) css网页布局分为3种机制:普通流.浮动.定位普通流:就是从上到下,从左到右的排布浮动:本质是让块元素横向排列 ...
小盒子在大盒子里面并排问题
当两个盒子在一个大盒子里时默认是从上往下依次往下的. 盒子如下:(这是我写的) <div class="xtx-main-nav contain ...
html一个大盒子中有三个小盒子,小班科学活动：大盒子、小盒子真有趣
活动目标: 1. 喜欢和老师.同伴一起看看.猜猜.讲讲各种有趣的盒子,乐意表达自己的想法和经验. 2. 初步感知探索盒子和盒中物品的关系,尝试用各种方法打开盒子. 活动准备: 大盒子三个.各种小盒子等 ...
flex white-space: nowrap,撑大盒子问题
flex布局,两行,一个是标题,一个是属性.想实现的功能,标题超长"......"省略号代替. 出现一个问题就是,内容过长,会撑大盒子宽度.虽然不显示,但是会影响下面一行属性的显示 ...
QQ小游戏 AppBox 创建广告盒子组件 API
AppBox QQ小游戏创建广告盒子组件 qq.createAppBox(Object object) AppBox qq.createAppBox(Object object) 创建广告盒子组件.基 ...
内边距、边框撑大盒子问题
我们在开发中经常会遇到设置盒子内间距和边框然后会撑大盒子的问题,然而我们又不想盒子被撑大,因为这会影响我们的布局,那么我们该怎么办呢? 首先我们要知道标准盒子模型宽高的计算方式. 标准盒子模型宽高=自 ...
内边距撑大盒子的问题
当设置遇盒子内间距和边框后,会将盒子撑大盒,然而我们又不想盒子被撑大,因为这会影响我们的布局. 盒子模型的宽高=内容区(自己设置的宽高)+内边距+边框所以当我们设置盒子内间距边框等属性的时候就盒子宽 ...
css制作提示小图标（内容撑开盒子）
一.内容撑开盒子:不设置盒子宽度,给盒子设置左右内边距撑开盒子(padding: 0 10px;) 注意行内元素不能设置长宽,需要先将其转换为行内块元素或者块级元素(display: inline-b ...

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

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

小盒子可以在大盒子里面移动相关推荐

最新文章

热门文章