7. Vue iconfont 编码转换

最新推荐文章于 2023-06-15 18:22:33 发布
最新推荐文章于 2023-06-15 18:22:33 发布
阅读量576 收藏
点赞数
分类专栏： Vue2 经验总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/b342216980/article/details/106942579
版权

Vue iconfont 编码转换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue iconfont 编码转换</title>
	<link rel="stylesheet" href="./iconfont/iconfont.css">
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		#bar {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 49px;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
		}
		.bar-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.icon {
			font-size: 24px;
		}
		.name {
			font-size: 12px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div id="bar">
			<div class="bar-item" v-for="item in items">
				<div class="icon iconfont">{{ iconfont(item.icon) }}</div>
				<div class="name">{{ item.name }}</div>
			</div>
		</div>
	</div>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		app = new Vue({
			el: '#app',
			data: {
				items: [
					{
						name: '首页',
						icon: '&#xe747;',
					},
					{
						name: '分类',
						icon: '&#xe766;',
					},
					{
						name: '购物车',
						icon: '&#xe747;',
					},
					{
						name: '个人中心',
						icon: '&#xe773;',
					},
				]
			},
			methods: {
				iconfont: function (icon) {
					const reg = /(&#x)?(.*)/
					let iconfontName
					if(reg.test(icon)) {
						iconfontName = reg.exec(icon)[2]
					}
					return String.fromCharCode(parseInt(iconfontName, 16))
				}
			}
		})
	</script>
</body>
</html>
白怀宇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IconFont汇总
08-10
Icon Font汇总
图标字体
weixin_43339334的博客
06-03 990
图标字体（iconfont） - 在网页中经常需要使用一些图标，可以通过图片来引入图标 但是图片大小本身比较大，并且非常的不灵活 - 所以在使用图标时，我们还可以将图标直接设置为字体， 然后通过font-face的形式来对字体进行引入 - 这样我们就可以通过使用字体的形式来使用图标 fontawesome 使用步骤 1.下载 https://fontawesome.com/ 2.解压 3.将css和webfonts移动到项目中 4.将a
硬编码转换单位||vue
weixin_30747253的博客
07-21 63
//测试单位 formatUnit:function (id) { var val; switch(id){ case 4: return val="圈" break; } } //弹出层测试介绍方法 formatind:function (id) { var val; switch(id){ case 4: val={ info:"心血管疾病风险因子越少。", step:"根据一定的节奏后计算得...
vue 中使用iconfont Unicode编码线上字体图标的流程
ahu2331的博客
07-09 810
1.打开http://www.iconfont.cn官网，搜索你想要的图标。添加字体图标到购物车，点击购物车然后添加至项目，点击确定 2.点击图标管理/我的项目，找到对应的文件，点击Unicode，然后生成在线链接 3.新建iconfont.css文件，把在线生成...
iconv编码格式转换
diyao5994的博客
05-15 874
1. iconv()介绍iconv函数可以将一种已知的字符集文件转换成另一种已知的字符集文件。例如：从GB2312转换为UTF-8。iconv函数在php5中内置，GB字符集默认打开。2. iconv()错误iconv在转换字符”—”到gb2312时会出错，解决方法是在需要转成的编码后加 “//IGNORE”，也就是iconv函数第二个参数后.如下： 代码如下: iconv...
从`.vue`文件生成`d.ts`。-JavaScript开发
05-26
从`.vue`文件生成`d.ts`。 :yellow_heart:通过在GitHub上赞助他，可以帮助他成为一名全职开源维护者。 vue-dts-gen从.vue文件生成d.ts。 全局安装：npm i -g vue-dts-gen或本地安装：npm i -D vue-dts-gen用法输出...
Vue.js对象转换实例
10-19
主要介绍了 Vue.js对象转换的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下
7. Vue.xmind
11-20
Vue高级思维导图，学习vue的好东西，
vue项目使用iconfont的最佳实践
08-12
在Vue.js项目中，有效地使用Iconfont是一种提升用户体验和优化前端性能的重要方法。Iconfont，又称图标字体，是一种将矢量图标转化为Web字体的方式，它允许开发者通过CSS样式来控制图标的大小、颜色和动画效果，同时...
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
10-16
主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 表情包编码转换
weixin_46324536的博客
02-03 466
【代码】vue 表情包编码转换。
iconfont的使用
xxayy1314的博客
06-29 446
文章目录1.前言2.下载图标1.搜索想要的图标2.添加入库3.下载代码4.解压并添加文件到项目中5.修改配置文件3.引用（通过图标的unicode编码进行引用）1.查看Unicode编码2.添加类配置图标 1.前言 iconfont链接：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 2.下载图标 1.搜索想要的图标 2.添加入库 3.下载代码 4.解压并添加文件到项目中 在项目中创建目录并添加该文件 5.修改配置
iconfont如何使用
最新发布
2302_76198190的博客
06-15 209
iconfont如何使用
iconfont使用详解
m0_53708508的博客
08-06 1261
目录 一、移动Web之字体图标（iconfont）使用 一、移动Web之字体图标（iconfont）使用 iconfont使用目的是为了简化网页中装饰性图标的实现方式。且iconfont具有加载速度快，兼容性高，灵活性高的特点。 步骤：1.前往https://www.iconfont.cn/图标库找到自己所需要的图标 2.登陆后选择目标图标，加入购物车。在购物车中添加至项目后，在项目中下载 ...
CSS3 icon font完全指南
NOT NULL
08-29 609
原文连接大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，本文将详细讲解这种用法。为什么要将icon做成字体？在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标
前端阿里云iconfont 字体图标正确使用方法
qq_42415827的博客
03-10 4889
uniapp+vue2.0开发 之 阿里云字体图标在项目中引用（支持所有端）
iconfont(阿里的图标库)
m0_67176957的博客
04-08 557
iconfont(阿里的图标库) 图标比较多，版权问题比较模糊(商用提前问一下作 者，自己练习可以.........) 图标字体只是单色的，不是彩色的 用它的图标字体，我们需要的步骤： 1找到你需要的图标，添加至购物车 2找到购物车，添加至自己的项目里 3点击下载至本地，将其提取到桌面上 4其中demo.index.html里放的案例(说明书) 5将其导入我们VSCode里的项目 <head> ......... ...
关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）
ake520520的博客
04-12 3471
1.附阿里图标库链接：http://www.iconfont.cn/ 2.登录阿里图标库以后，搜索我们需要的图标，将其加入购物车，如图3.将我们需要的图标全部挑选完毕以后，点击购物车图标4.这时候右侧会出现一个预览窗口，显示我们前面加入购物车的那些图标，我们选择页面中的下载代码 5.查看一下我们的下载包里面都有什么文件 6.使用fontclass方式其实在下载的文件...
使用iconfont图标的unicode编码动态赋值，发现只显示编码，不显示图片
akxj2022的博客
04-24 5961
iconfont里图标的unicode编码 例如： &#xe601; 改成: \ue601 即可
.vue文件转换成.html
03-31
Vue.js是一个构建用户界面的渐进式框架，它的组件通常是以.vue文件的形式存在。而将.vue文件转换成.html文件并不是Vue.js的主要用途，因为.vue文件中包含了Vue组件的定义、样式和逻辑，转换成html文件会丢失很多信息，也无法直接运行。但是，如果你想将Vue组件嵌入到其他网页中，可以通过编译器将.vue文件转换成.js文件，再通过Webpack等工具打包成.js文件，最终在html文件中引用即可。 以下是将.vue文件转换成.js文件的方法： 1. 安装Vue的脚手架工具，命令如下： ``` npm install -g vue-cli ``` 2. 创建Vue项目，命令如下： ``` vue init webpack my-project ``` 其中，my-project是项目名称，可以自定义。 3. 进入项目目录，安装依赖，命令如下： ``` cd my-project npm install ``` 4. 创建.vue文件，例如HelloWorld.vue，内容如下： ```html <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> h1 { color: red; } </style> ``` 其中，template标签是模板部分，script标签是逻辑部分，style标签是样式部分。 5. 编译HelloWorld.vue文件，生成HelloWorld.js文件，命令如下： ``` npm run build ``` 6. 在网页中引用HelloWorld.js文件，例如： ```html <!DOCTYPE html> <html> <head> <title>Hello World</title> <script src="dist/build.js"></script> </head> <body> <div id="app"></div> <script> new Vue({ el: '#app', render: h => h(HelloWorld) }) </script> </body> </html> ``` 其中，dist/build.js是Webpack打包生成的文件，HelloWorld是Vue组件的名称，可以在script标签中import引入。最终，打开网页即可看到Hello World的效果。 需要注意的是，以上仅是将.vue文件转换成.js文件的简单示例，实际应用中还需要考虑代码分割、异步加载等问题，具体可以参考Vue的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值