vue3 点击按钮, 盒子向左移动

// 这是一个点击让盒子向左移动的事件

const turnRight = () => {

// 获取父盒子的宽度 / 本项目要求点一次右边移动按钮所以 / 2

let willTrun = localStorage.getItem('wWidth') / 2

// 获取要移动的盒子本来的位置

let move = middle._value.style.left

if(move.includes('px')){ // 判断有没有 px 有就切割一下转字符串后面好累加

move=Number(move.split('px')[0].split('-')[1])

}

// 如果盒子移动大于父盒子的宽度就不允许再移动了

if(move>middle.value.offsetWidth - willTrun * 2)return

move += willTrun // 移动的累加

middle._value.style.left = -move + 'px';

console.log(move, 'move');

}

vue3 点击按钮, 盒子向左移动相关推荐

使用vue2开发的移动端项目头部点击按钮显示出来的盒子，盒子里面有element-ui里面的导航栏菜单，点击里面某一个导航栏菜单实现跳转之后显示出来的盒子隐藏
1 . 在头部点击按钮时,通过一个变量控制盒子的显示和隐藏.可以使用v-if或者v-show指令来实现,例如: <template><div><div @click ...
html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div ...
vue2和vue3中点击复制粘贴
文章目录一.技术使用背景二.Vue2(点击复制粘贴功能的实现) 1.安装库并引入 2.定义methods和template结构(两种实现的方法) 3.测试结果第二种使用的方法三.Vue3(点击 ...
uniapp微信小程序：点击按钮先判断用户是否授权位置信息、用户位置信息授权、进入下一个页面
文章目录前言一.创建点击事件的方法二.判断用户是否授权位置三.弹出位置授权框四.坐标到坐标所在位置的文字描述的转换(逆地址解析) 五.拒接授权后再次点击按钮跳转到允许访问位置设置总结前言 ...
php点击复制按钮到我的粘贴板,JS 实现点击按钮复制内容到粘贴板 clipboard
具体实现如下: 点击按钮复制内容到粘贴板 body { text-align: center; } #p1 { line-height: 150px; font-size: 40px; } #sour ...
asp.net 页面中点击按钮后无反应的解决方法
在使用Asp.net开发BS应用程序的时候,我们经常会用到.net自带的验证控件,所以也会碰到如下情况,在表单中输入内容后,无论内容是否合法,点击按钮后,页面都不会执行提交动作(页面无任何反应),这种 ...
php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多，不刷新页面加载更多数据！附：可用源码+demo...
先上效果: 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了! 新建index.php jQuery+p ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
点击按钮出现水波纹动画
效果如下: 思路: 按钮及按钮的父标签定位需为绝对定位或相对定位绑定按钮的click事件,把其样式设置为overflow:hidden,并添加下标线标签并设置其样式当鼠标点击按钮时,如果按钮内有标 ...

vue3 点击按钮, 盒子向左移动

vue3 点击按钮, 盒子向左移动相关推荐

最新文章

热门文章