7. Vue iconfont 编码转换

最新推荐文章于 2024-05-15 17:31:09 发布

原创最新推荐文章于 2024-05-15 17:31:09 发布 · 641 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue2 经验总结专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Iconfont图标字体，并通过编码转换实现动态图标显示。通过正则表达式解析Unicode编码，将其转换为对应的字符，使图标在页面上正确呈现。

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>