element-plus CDN引入如何使用图标

cqwcns · 发表于 2022-6-29 22:12

我希望在CDN引入的element-plus中使用icon，但报错，无法找到组件。
我不知道在哪里用什么方式引入组件，或者问题出在哪里，请各位大佬指教，感谢。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 导入样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <!-- 导入组件库 -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>

</head>

<body>

    <div id="app">
        <el-row class="mb-4">
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
            <el-button>中文</el-button>
        </el-row>

        <br>

        <div style="font-size: 20px">
            <p>想在这里显示图标</p>
            <Edit style="width: 1em; height: 1em; margin-right: 8px" />
            <Share style="width: 1em; height: 1em; margin-right: 8px" />
            <Delete style="width: 1em; height: 1em; margin-right: 8px" />
            <Search style="width: 1em; height: 1em; margin-right: 8px" />
            <p>想在这里显示图标</p>
            <el-icon>
                <Delete />
            </el-icon>
        </div>

    </div>

</body>

<script>
    const Counter = {
        data() {
            return {
            }
        },
        mounted() { },
        methods: {}
    }

    const app = Vue.createApp(Counter);
    app.use(ElementPlus);
    app.mount("#app");
</script>

</html>

小丑恶人 · 发表于 2022-6-29 22:55

本帖最后由小丑恶人于 2022-6-29 22:58 编辑

npm install @element-plus/icons
按需引入

import { AddLocation,Aim } from "@element-plus/icons-vue";
app.component("AddLocation", AddLocation);
app.component("Aim", Aim);
\<div class="app">
    \<el-icon>\<aim />\</el-icon>
</div>

全局引入

import * as Icons from "@element-plus/icons-vue"; //导入所有element icon图标
// 注册全局图标
Object.keys(Icons).forEach((key) => {
  app.component(key, Icons[key]);//JS中用这行
  // app.component(key, Icons[key as keyof typeof Icons]);//TS中用这行
});
\<div class="app">
    \<el-icon>\<aim />\</el-icon>
</div>

songxp03 · 发表于 2022-6-29 23:06

src中地址双斜杠前面加http试试

ToBug · 发表于 2022-6-29 23:34

src中地址双斜杠去了

蓝萌养猫 · 发表于 2022-6-30 00:06

cqwcns · 发表于 2022-6-30 09:18

小丑恶人发表于 2022-6-29 22:55
[md]npm install @element-plus/icons
按需引入
```vue

你好，我是CDN引入，没有npm的

cqwcns · 发表于 2022-6-30 09:18

蓝萌养猫发表于 2022-6-30 00:06

已测试，不行

蓝萌养猫 · 发表于 2022-7-3 21:49

cqwcns 发表于 2022-6-30 09:18
已测试，不行

会不会是你的网络连不上？或许你直接打开这个网址试试？

[VIP]゛、月少° · 发表于 2022-7-26 17:09

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入 样式 -->
    <link rel="stylesheet"  />
    <!-- 导入 Vue 3 -->
    <script src="http://cdn.jsdelivr.net/npm/vue@next"></script>
    <!-- 导入 组件库 -->
    <script src="http://cdn.jsdelivr.net/npm/element-plus"></script>
    <!-- 导入 图标组件库 -->
    <script src="http://cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
    <!-- 导入 语言 -->
    <script src="http://unpkg.com/element-plus/dist/locale/zh-cn"></script>
</head>
<body>
    <div id="app">
        <el-row class="mb-4">
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
            <el-button>中文</el-button>
        </el-row>
 
        <br>
        <div style="font-size: 20px">
            <!-- 由于SVG图标默认不携带任何属性 -->
            <!-- 你需要直接提供它们 -->
            <Edit style="width: 1em; height: 1em; margin-right: 8px"></Edit>
            <Share style="width: 1em; height: 1em; margin-right: 8px"></Share>
            <Delete style="width: 1em; height: 1em; margin-right: 8px"></Delete>
            <Search style="width: 1em; height: 1em; margin-right: 8px"></Search>
        </div>
</body>
<script>
    const App = {
        data() {
            return {
            }
        },
        mounted() { },
        methods: {}
    }
 
    const app = Vue.createApp(App);
    app.use(ElementPlus, { locale: ElementPlusLocaleZhCn});
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    app.mount("#app");
</script>
</html>

你好，再见 · 发表于 2022-8-11 23:11

你按f12看看组件加载没有

帐号		自动登录	找回密码
密码			注册[Register]

[求助] element-plus CDN引入如何使用图标

免费评分

免费评分