Vue3 使用vant actionBar组件后对icon图标的点击切换效果/点击收藏/取消收藏

Igiveufireworks

已于 2022-08-31 14:35:35 修改

阅读量2.6k

点赞数 5

文章标签： Vue 图标切换收藏功能事件处理 DOM操作

于 2022-04-15 23:35:43 首次发布

本文链接：https://blog.csdn.net/Igiveufireworks/article/details/124206116

版权

制作收藏的点击收藏、取消收藏的图标切换效果

效果：

vue：

<template>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" to="/cart"/>
    <van-action-bar-icon icon="star-o" text="收藏" @click="handelCollectAdd" />
    <van-action-bar-button type="warning" text="加入购物车" @click="handelCartAdd"/>
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
</template>

js 代码：点击切换效果

let status = true
const p = document.getElementsByClassName('van-action-bar-icon')
const handelCollectAdd = () => {
  if (status) {
    status = false
    // console.log(p[2].childNodes[0])
    p[2].childNodes[0].classList.replace('van-icon-star-o', 'van-icon-star')
    p[2].childNodes[1].data = '已收藏'
    console.log(p)
  } else {
    status = true
    p[2].childNodes[0].classList.replace('van-icon-star', 'van-icon-star-o')
    p[2].childNodes[1].data = '收藏'
  }
}

根据类名获取元素 getElementsByClassName，得到数组，根据数组下标找到‘收藏’的位置，打印输出找到：

同时看到控制该图标的样式：

所以，p[2].childNodes[0] 找到需要修改的icon图标，使用html新增classList 操作类名，

classList.replace( oldClassName，newClassName )；
类名替换

css：

:deep(.van-icon-star:before) {
  content: '\e727';
  color: #ff5000;
}
:deep(.van-icon-star-o:before){
  content: '\e722'
}