效果：
|
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的点击事件 |
