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

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

效果：

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 = truep[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'
}

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

vue3+ant design vue 动态加载Icon图标
问题与思路在使用前端组件库时,我们常常会遇到需要动态加载 Icon 图标,如何处理这一需求,是前端开发人员必须思考的问题.在 vue 中,有一个内置组件 component,它的主要作用是配合 is ...
【vue3组件封装】Icon图标组件
使用 <s-icon icon="icon-file"/> 准备图标这里使用的icon均自于https://www.iconfont.cn/,它是支持unicode. ...
vue 打包部署子目录后 elementUI icon 图标不显示
问题部署后element-icon 请求资源404 解决修改 vue.config.js (添加前缀路径) vue.config.js完整代码 'use strict' const path = ...
若依后台管理系统打包后，icon图标乱码
解决方法: 1.sass版本升级到1.39.0 2.配置vue.config.js,加上以下代码 module.exports = {css: {loaderOptions: {sass: {sass ...
Naive 组件库动态渲染icon图标
使用Naive组件库默认你已经安装了对应的icon图标库没有安装的参考链接安装点击传送 Naive组件动态渲染Icon图标主要是使用 component Vue内置组件来渲染对应的icon组件, ...
如何获取和制作免费的icon图标素材
icon 图标在界面设计中虽然占比不大,但却是不可缺少的设计元素之一.设计师通过 icon 图标,将抽象的概念通俗化,降低用户理解某个操作的难度.而设计师也会通过改变 icon 图标的样式来展现整体界 ...
【Vue3】Vue3+Vite前端在组件中直接使用svg图标icon(实现设计稿的icon解决方案)
webpack实现下载icon图标(svg格式) 用到的是腾讯codesign,其他平台也能进行svg图片的下载放入项目 svg中如何控制图标颜色如下图控制svg颜色的是fill参数,此处可以删 ...
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标.而我的图标是全局导入的,默认 ...
vant图标怎么显示不出来_Vant Icon 图标
介绍基于字体的图标集,可以通过 Icon 组件使用,也可以在其他组件中通过icon属性引用引入import Vue from 'vue'; import { Icon } from 'vant'; ...

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

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

最新文章

热门文章