前言

一个按钮里放了两个icon图标，点击按钮改变icon图标。
本次使用的Heroicons图标库
点击前效果图如下：

点击后效果图：

一、引入heroicons图标

import { HomeIcon, UserIcon, CubeIcon, MapIcon, OfficeBuildingIcon } from '@heroicons/vue/outline';//引入细线icon
import { HomeIcon as HomeIconB, UserIcon as UserIconB, OfficeBuildingIcon as OfficeBuildingIconB, MapIcon as MapIconB, CubeIcon as CubeIconB } from '@heroicons/vue/solid'//引入粗线icon，避免粗细icon冲突，对icon重命名

二、具体实现代码

<router-link @click="openButton('home')" to="/index"><HomeIcon v-if="icon != 'home'" class="w-6" /><HomeIconB v-if="icon == 'home'" class="iconM" /><div :class="{ activeFont: icon == 'home' }">社区</div>
</router-link>
<script lang="ts">
export default {data() {return {icon: 'home',};},methods: {openButton(iconV) {this.icon = iconV;},},
};
</script>

vue实现icon图标切换，点击按钮后改变当前按钮样式相关推荐

VUE中icon图标与文字不齐
VUE中icon图标与文字不齐最近在使用vant组件引用了某个icon之后发现与文字对不齐,找到了一个最简便的办法就是直接给icon加上属性vertical-align: -10% <van- ...
Vue3 使用vant actionBar组件后对icon图标的点击切换效果/点击收藏/取消收藏
制作收藏的点击收藏.取消收藏的图标切换效果效果: vue: <template><van-action-bar><van-action-bar-icon icon=&q ...
Vue组件Icon图标处理方案
Icon图标处理方案记录一次对于想使用element-plus之外的图标,如何封装成一个组件,是本次记录的目标,希望在工作时能帮助自己处理图标问题. 分析,对于element-plus的图标可以通过 ...
Vue 引入 icon 图标
安装 npm install vue-svg-icon --save-dev 使用 1. 阿里巴巴矢量图选择需要的字体修改参数选择SVG下载 2. IcoMoon 点击右上角"icoMo ...
VUE3 使用 Ant Design Vue的icon图标
安装: npm install --save @ant-design/icons-vue 2.在main入口文件引入,不想一个个一得导入,可直接循环导入即可 import { createApp } ...
vue.使用popstate监听点击浏览器自带返回按钮
我写在了app.vue,大家可以按项目需要写在需要的位置 <script> export default {name: 'App',mounted(){// 监听返回事件,点击系统返回时i ...
vue使用中icon图标失效问题（已解决）
图标失效前: 这是因为从ElementPlus@1.20起icon包改名了,站在要用import {图标名字} from '@element-plus/icons-vue' 改成方式: <scr ...
java jbutton 不可点击_JAVA点击按钮后使其它按钮不能被点击
展开全部参考代码和注释如下import javax.swing.*; import java.awt.*; import java.awt.event.*; //本类继承自JFrame,实现e69d ...
点击button后改变文字_27. 教你零基础搭建小程序：小程序的常见组件—button
筒子们,这一章接着讲Button 标签. 开放能力的属性 button标签的开放能力是指open-type 属性. 其中,这个属性的合法值包括如下: 这一部分呢,需要分为两个方式来演示. 一是可在模拟 ...

vue实现icon图标切换，点击按钮后改变当前按钮样式

前言

一、引入heroicons图标

二、具体实现代码

vue实现icon图标切换，点击按钮后改变当前按钮样式相关推荐

最新文章

热门文章