按照文档学习过程中,结合文心一言等工具,得到的代码,可能由于文档理解不够,盲信AI工具,图标只显示空白大小有占位不显示图标。
由于是初学,并不想使用,npm等包管理工具,个人喜欢js引入的方式,来集成到项目中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Plus Icon Example</title>
<link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.7.0/index.css" rel="stylesheet">
</head>
<body>
<div id="app" style="margin:50px 0 0 150px; ">
<el-icon :size="50" :color="blue">
<Edit />
</el-icon>
<!-- 或者独立使用它,不从父级获取属性 -->
<el-button type="primary">
<el-icon :size="20" :color="blue">
<Search />
</el-icon>
<span>搜索</span>
</el-button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.0/vue.global.prod.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.7.0/index.full.min.js"></script>
<script src="icon-vue.js"></script> <!-- 使用图标,必须引入 icons-vue js文件 -->
<script>
const app = Vue.createApp({});
const {IconsVue} = ElementPlus
//注册ElementPlus 插件 到vue
app.use(ElementPlus);
// console.log(typeof(ElementPlusIconsVue), ElementPlusIconsVue) // 用于检查图标 对象 属性
//注册图标组件到vue
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
console.log('注册组件:', key, typeof(component));
app.component(key, component);
}
//
app.mount('#app');
</script>
</body>
</html>