JS实现鼠标点击箭头旋转180度功能

2024-03-02 0 204 百度已收录

效果:

JS实现鼠标点击箭头旋转180度功能

1
2
3
4
<div @click="showChecklist" class="checkCLass cur pr-20px pl-20px pa flex ai-center">
    <span>{{ checkListStatus() }}</span>
    <p class="trangle"></p>
</div>

下面是三角形状的样式

1
2
3
4
5
6
7
8
9
10
11
12
.trangle {
  width: 0;
  transition: all 0.2s ease-in;
  height: 0;
  border-bottom: 0 solid transparent;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #fff;
}
.rotateBottom {
  transform: rotate(-180deg);
}

点击,三角按钮旋转180度

1
2
3
4
5
6
7
8
9
const showChecklist = () => {
  const dom = document.querySelector(".trangle");
  if (!isShowChecklist.value) {
    dom?.classList.add("rotateBottom");
  } else {
    dom?.classList.remove("rotateBottom");
  }
  isShowChecklist.value = !isShowChecklist.value;
};

补充:

原生js自动触发点击事件

主动触发事件:使用dispatchEvent方法

该方法能模拟用户行为,如点击(click)操作等。 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法。

1
2
3
var btn=document.getElementById("myBtn");
var event = new MouseEvent("click");
btn.dispatchEvent(event); // 触发myBtn的点击事件
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开支付宝扫一扫,即可进行扫码打赏哦,您的支持,是我继续创作的动力。
点赞 (0)

中和威客保留所有权利,未经本站书面许可不得转载本站内容!文中观点不代表本站立场!

中和威客 前端 JS实现鼠标点击箭头旋转180度功能 https://www.izhwk.com/archives/693

常见问题
  • 您需要注册成为本站会员,然后再通过会员中心的升级VIP功能,方可成为本站的VIP会员。
查看详情
  • 首先您需要注册成为本站会员,然后到会员中心充值,充值后支付对应资源的查看金额即可查看付费内容。
查看详情

相关文章

评论
暂无评论
JS实现鼠标点击箭头旋转180度功能-海报

分享本文封面