mart-admin/src/views/pages/iocnfont/index.vue

<template>
	<div class="iconfont-container">
		<el-card shadow="hover" :header="`iconfont 字体图标(自动载入)：${sheetsIconList.length}个`">
			<el-row class="iconfont-row">
				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
					<div class="iconfont-warp">
						<div class="flex-margin">
							<div class="iconfont-warp-value">
								<i :class="v" class="iconfont"></i>
							</div>
							<div class="iconfont-warp-label mt10">{{ v }}</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted } from 'vue';
import initIconfont from '/@/utils/getStyleSheets.ts';
export default {
	name: 'pagesIocnfont',
	setup() {
		const state = reactive({
			sheetsIconList: [],
		});
		// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
		const initGetStyleSheets = () => {
			initIconfont.ali().then((res: any) => (state.sheetsIconList = res));
		};
		// 页面加载时
		onMounted(() => {
			initGetStyleSheets();
		});
		return {
			...toRefs(state),
		};
	},
};
</script>

<style scoped lang="scss">
.iconfont-container {
	.iconfont-row {
		border-top: 1px solid #ebeef5;
		border-left: 1px solid #ebeef5;
		.iconfont-warp {
			text-align: center;
			border-right: 1px solid #ebeef5;
			border-bottom: 1px solid #ebeef5;
			height: 120px;
			overflow: hidden;
			display: flex;
			transition: all 0.3s ease;
			&:hover {
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
				cursor: pointer;
				transition: all 0.3s ease;
				.iconfont-warp-value {
					i {
						color: var(--color-primary);
						transition: all 0.3s ease;
					}
				}
				.iconfont-warp-label {
					color: var(--color-primary);
					transition: all 0.3s ease;
				}
			}
			.iconfont-warp-value {
				i {
					color: #606266;
					font-size: 32px;
					transition: all 0.3s ease;
				}
			}
			.iconfont-warp-label {
				color: #99a9bf;
				transition: all 0.3s ease;
			}
		}
	}
}
</style>