element plus 图标，在html页面中正确引入，部分生效，部分不生效，可能是你的写法错了

凉豆菌

于 2024-09-05 09:17:53 发布

阅读量383

点赞数 7

分类专栏： Element 文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/m0_67755668/article/details/141919082

版权

Element 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写一下今天在html中用element plus 图标时遇到的坑，文件引入，组件注册都没问题，plus这种图标组件都能正常使用，但是CaretBottom这类的组件就不生效，看了下控制台，警告提示没有这个标签存在。没错，问题就出现在这里，找不到这个标签，因为标签名字写法错误，不能直接在html页面中用官方给的写法（官方(vue模板中)：<el-icon><CaretBottom/></el-icon>）,在html中标签不能用驼峰命名（html中：<el-icon><caret-bottom/></el-icon>），修改后图标就出来啦

附上html用引用，注册图标方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/aiAssets/css/elementPlus.css">
</head>
<body>
    <div id="inputApp">
        <el-icon><caret-bottom/></el-icon>
    </div>
	<script src="/assets/js/jquery-3.5.1.min.js" charset="utf-8"></script>
    <script src="/assets/aiAssets/js/vue.global.js"></script>
	<script src="/assets/aiAssets/js/elementPlus.full.js"></script>
	<script src="/assets/aiAssets/js/icons-vue.js"></script>
    <script>
        $(function () {
            //使用 vue3 的基本格式
            const {createApp , ref } = Vue
            const app =  createApp({
                // 逻辑代码全部写在setup里面
                // 因为没有语法糖，无论是定义的"变量"或者"函数"都必须！
                // 把名称再多写一次！放在在最后return里面
                setup(){

                    return {
                        
                    }
                }
            })
            //应用vue（就是挂载在上面ID绑定的元素上）
            app.use(ElementPlus);
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                app.component(key, component)
            }
            app.mount("#inputApp");
        })
    </script>
</body>
</html>