vue中使用use引入的svg怎么添加title

项目框架:

vue2

使用场景:

我们项目中的svg文件比较多,每个都copy里面的svg代码的话,会造成需要写很多个vue文件,于是乎当时采用了use的方式引入了svg文件

代码如下(当然中间省去了其他步骤,use方式引入svg不是本篇重点)

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"/></svg>
</template>
遇到的问题

每个icon好像默认使用了文件名称作为title,也就是悬浮上去提示的文字。所以需要添加title

svg直接添加title是无效的,必须使用svg自己的title标签,直接添加到use的外面也是无效的,如下示例

<!-- 无效代码1 -->
<template><svg :class="svgClass" aria-hidden="true" :title="title"><use :xlink:href="iconName"/></svg>
</template><!-- 无效代码2 -->
<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :title="title"/></svg>
</template><!-- 无效代码3 -->
<template><svg :class="svgClass" aria-hidden="true"><title v-if="title">{{ title }}</title><use :xlink:href="iconName"/></svg>
</template>
最后的实现

需要加在use的里面

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"><title v-if="title">{{ title }}</title></use></svg>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/805060.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4.19号驱动

1. ARM裸机开发和Linux系统开发的异同 相同点&#xff1a;都是对硬件进行操作 不同点&#xff1a; 有无操作系统 是否具备多进程多线程开发 是否可以调用库函数 操作地址是否相同&#xff0c;arm操作物理地址&#xff0c;驱动操作虚拟地址 2. Linux操作系统的层次 应用层…

(2022级)成都工业学院数据库原理及应用实验二:CASE工具关系模型建模

写在前面 1、基于2022级软件工程/计算机科学与技术实验指导书 2、代码仅提供参考 3、如果代码不满足你的要求&#xff0c;请寻求其他的途径 运行环境 window11家庭版 PowerDesigner 16.1 实验要求 某医院一个门诊部排班管理子系统涉及如下信息&#xff1a; 若干科室&a…

Echarts+vue-baidu-map绘制行驶路线

依赖下载 首先要在Vue项目中结合vue-baidu-map和ECharts绘制行驶路线&#xff0c;需要先安装并导入相关的库 npm install vue-baidu-map echarts --save注册引入 Echarts引入详情 官网查看 import * as echarts from echarts;// 基于准备好的dom&#xff0c;初始化echarts实…

成都百洲文化传媒有限公司靠谱吗?怎么样?

随着互联网的迅猛发展&#xff0c;电子商务行业迎来了前所未有的发展机遇。在这个变革的浪潮中&#xff0c;成都百洲文化传媒有限公司凭借其深厚的行业经验和创新的服务模式&#xff0c;正逐渐成为电商服务领域的新领军者。 一、创新引领&#xff0c;塑造电商服务新标准 成都百…

VS选择数据源数据提供程序的区别

VS选择数据源数据提供程序的区别 1、用于OLE DB的.net framework 数据提供程序 OLE DB是微软提供的一种数据访问技术&#xff0c;它允许应用程序访问存储在不同类型的数据源中的数据。.NET Framework 提供了一个用于OLE DB的数据提供程序&#xff0c;允许开发人员使用ADO.NET…

Windows下docker-compose部署DolphinScheduler

参照&#xff1a;快速上手 - Docker部署(Docker) - 《Apache DolphinScheduler v3.1.0 使用手册》 - 书栈网 BookStack 下载源文件 地址&#xff1a;https://dolphinscheduler.apache.org/zh-cn/download/3.2.1 解压到指定目录&#xff0c;进入apache-dolphinscheduler-xxx-…

蓝桥杯备考随手记: 递归

递归是一种解决问题的方法&#xff0c;通过将原问题分解为更小的、相同形式的子问题来解决。在递归中&#xff0c;函数会调用自身来解决这些子问题&#xff0c;直到达到基本情况&#xff08;终止条件&#xff09;&#xff0c;然后逐层返回结果&#xff0c;最终得到整个问题的解…

vscode开发小程序项目并在微信开发者工具运行

需求&#xff1a;vscode开发uniapp之后在微信开发者工具运行&#xff0c;更改的时候微信开发者也同步更改 创建微信小程序所需插件&#xff0c;在vscode的插件管理里面安装就可以了 1.微信小程序开发工具 2.vscode weapp api 3.vscode wxml 4.vscode wechat 1.创建小程序命…

vue3的 watch

两个例子中&#xff0c;主要区别在于监视的对象不同 watch( tablelist.value, () > { console.log(tablelist.value, "tablelist"); }, { deep: true }, ); watch 监视的是 tablelist.value 的值。也就是说&#xff0c;当 tablelist.value 发生变化时&#xff0c…

[HDCTF 2023]Normal_Rsa(revenge)(素数分解)

题目&#xff1a;&#xff08;注释为分析&#xff09; from Crypto.Util.number import * #from shin import flagmbytes_to_long(bHDCTF{******}) e65537 pgetPrime(256) qgetPrime(512) rgetPrime(512) np*q*r## phi(p-1)*(q-1)*(r-1) Ppow(p,2,n)## Pp**2 piroof(P,2) Qpo…

前端md5校验文件

前端获取文件的md5值&#xff0c;与文件一同传到后端&#xff0c;后端同样对md5值进行校验。如果相同&#xff0c;则文件未被损坏&#xff08;其实这种方式优点类似于tcp、ip的差错校验&#xff0c;好像token也是这种方式&#xff09; 项目准备 前端并不可能手写一个算法来实…

python新特性

字符串格式化输出 字符串格式化输出 formatted字符串是带有f字符前缀的字符串&#xff0c;可以很方便的格式化字符串 #旧版本 name 泉信 print(公司是&#xff1a; %s%name) print(公司是&#xff1a; {}.format(name)) #新版本 print(f欢迎加入&#xff1a; {name}) lang…

c++学生排名表(析构函数)

现在输入一批学生&#xff08;人数大于0且不超过100&#xff09;的名次和他们的姓名。要求按名次输出每个人的排名。 输入格式&#xff1a;每行为一个学生的信息&#xff0c;共两项&#xff0c;第一项为排名&#xff08;为正整数&#xff0c;且任意两名学生的排名均不同&#…

2024年武汉中级工程师评审学历、论文、业绩有什么要求?

2024年大部分地区职称申报已经开始&#xff0c;今年因为政策变动&#xff0c;基本上需要全员参加水平能力测试&#xff0c;水测通过之后安排评审&#xff0c;那么对于中级职称评审有什么要求呢&#xff1f;我们一起跟甘建二看看。 一、2024年武汉中级工程师职称评审学历要求&am…

Web前端—属性描述符

属性描述符 假设有一个对象obj var obj {a:1 }观察这个对象&#xff0c;我们如何来描述属性a&#xff1a; 值为1可以重写可以遍历 我们可以通过Object.getOwnPropertyDescriptor得到它的属性描述符 var desc Object.getOwnPropertyDescriptor(obj, a); console.log(desc);我…

安卓逆向 | 某X游戏垂类Web nonce

*本案例仅做分析参考,如有侵权请联系删除 1.逻辑分析 通过XHR断点,然后逐步往上调发现nonce生出处。 在console执行下函数 其中 i,是当前日期和时间的秒级时间戳,并将其向下取整到最接近的整数。 i = ~~(+_.w() / 1e3)w</

设计模式之迭代器模式(上)

迭代器模式 1&#xff09;概述 1.概念 存储多个成员对象&#xff08;元素&#xff09;的类叫聚合类(Aggregate Classes)&#xff0c;对应的对象称为聚合对象。 聚合对象有两个职责&#xff0c;一是存储数据&#xff0c;二是遍历数据。 2.概述 迭代器模式(Iterator Patter…

Go语言不能常量取址!?

题如下图 在软件开发中&#xff0c;常量是一种重要的编程元素&#xff0c;它们在程序中起到固定值的作用被大量使用 Go语言中的常量取址 在 Go 语言中&#xff0c;常量是无法被取址的。这意味着我们不能使用取址操作符 & 来获取常量的地址。例如&#xff1a; const a …

【Java EE】关于Spring MVC 响应

文章目录 &#x1f38d;返回静态页面&#x1f332;RestController 与 Controller 的关联和区别&#x1f334;返回数据 ResponseBody&#x1f38b;返回HTML代码片段&#x1f343;返回JSON&#x1f340;设置状态码&#x1f384;设置Header&#x1f338;设置Content-Type&#x1f…