0
天
08
时
35
分
29
秒
请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

为什么老师的Icon组件只能使用一次呢？

老师，我发现您的icon组件只能使用一次，第二次就不渲染图标了。

测试代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试Icon组件是否可用</title>
    <script src="./js/vue.global.js"></script>
    <script src="../dist/jingsi.data-visual.js"></script>
    <style>
        .vue-icon {
            width: 50px;
            height: 50px;
            color: purple;
        }
    </style>
</head>
<body>
<div id="app">
    <div>{{message}}</div>
    <!--  原生SVG  -->
    <div style="width: 50px;height: 50px;display: inline-block;color: aqua;">
        <svg width="100%" height="100%" viewBox="0 0 100 100">
            <line x1="0" y1="0" x2="100" y2="100" stroke-width="1" stroke="currentColor"/>
            <line x1="100" y1="0" x2="0" y2="100" stroke-width="1" stroke="currentColor"/>
        </svg>
    </div>
    <!--  引用原生SVG, width和height设为0，是为了不显示出来，只被引用就好了  -->
    <svg width="0" height="0">
        <defs>
            <symbol id="icon1" viewBox="0 0 100 100">
                <line x1="0" y1="0" x2="100" y2="100" stroke-width="1" stroke="currentColor"/>
                <line x1="100" y1="0" x2="0" y2="100" stroke-width="1" stroke="currentColor"/>
            </symbol>
        </defs>
    </svg>
    <div style="width: 50px;height: 50px;display: inline-block;color: red;">
        <svg width="100%" height="100%">
            <use href="#icon1"/>
        </svg>
    </div>
    <!--  SVG的VUE3组件  -->
    <svg width="0" height="0">
        <defs>
            <symbol id="icontimes" viewBox="0 0 100 100">
                <line x1="0" y1="0" x2="100" y2="100" stroke-width="1" stroke="currentColor"/>
                <line x1="100" y1="0" x2="0" y2="100" stroke-width="1" stroke="currentColor"/>
            </symbol>
        </defs>
    </svg>
    <icon name="times" style="width: 50px;height: 50px;color: bisque;"/>
    <icon name="times" :clazz="['vue-icon']"/>
 
    <svg width="50px" height="50px" viewBox="0 0 100 100">
        <circle r="50" cx="50" cy="50"/>
    </svg>
    <svg width="0" height="0">
        <defs>
            <symbol id="iconcircle" viewBox="0 0 100 100">
                <circle r="50" cx="50" cy="50"/>
            </symbol>
        </defs>
    </svg>
    <icon name="circle" :clazz="['vue-icon']"/>
</div>
<script>
    Vue.createApp({
        setup() {
            return {
                message: 'hello world!'
            }
        }
    }).use(DataVisual).mount('#app');
</script>
</body>
</html>

这段代码只渲染了的图标，的图标没渲染。这是什么原因呢？


ps:

  1. 下面是我的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<template>
    <div class="icon-container">
        <div class="icon-wrapper" :style="style" :class="clazz">
            <svg class="icon">
                <use :href="iconId"/>
            </svg>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: 'icon',
        props: {
            name: {
                type: String,
                default: ''
            },
            prefix: {
                type: String,
                default: 'icon'
            },
            style: {
                type: Object,
                default: {}
            },
            clazz: {
                type: Array || Object,
                default: []
            }
        },
        setup(ctx) {
            const iconId = `#${ctx.prefix}${ctx.name}`
            return {
                iconId
            }
        }
    }
</script>
 
<style lang="scss" scoped>
    .icon-wrapper {
        display: inline-block;
 
        .icon {
            width: 100%;
            height: 100%;
            fill: currentColor;
        }
    }
</style>
 
<style lang="scss">
    .icon-container {
        display: inline-block;
    }
</style>
他门说这就是人生 2020-07-13 17:16:10
源自：12-8  iconfont 最佳实践
901
收起

正在回答

插入代码

提交 取消

1回答

扬_灵 回答被采纳获得+3积分 2020-07-13 17:54:03

同学你好，在icon组件外面套一个元素包裹一下就可以了，在使用时name应该为全称iconcircle和icontimes。如果不能解决你的问题，可以继续追问。

0 回复 有任何疑惑可以回复我~
收起回答
  • 提问者 他门说这就是人生 #1 
    真的可以！那为什么包裹一层div就可以了呢？没懂其中的奥秘。
    回复 有任何疑惑可以回复我~ 2020-07-14 08:10:36
  • 提问者 他门说这就是人生 #2 
    我贴上了我的组件的代码，为什么我在组件内的外层包裹一个div就不行，而在使用组件时包裹一个div就可以呢？谢谢老师。我和您的代码都有这个问题，所以我现在贴的是我的代码了。
另外，我的组件的prefix默认为icon，所以不用写icon也行。
    回复 有任何疑惑可以回复我~ 2020-07-15 10:32:33
  • 扬_灵 回复 提问者 他门说这就是人生 #3 
    每个icon组件都需要添加一个div才能显示
    回复 有任何疑惑可以回复我~ 2020-07-15 18:30:08
点开查看后面1条评论
取消 回复

相似问题

老师，为什么在调用自组件的时候删除方法不能删除父组件的数据
894 0 5
为什么我执行Edit的onPress事件,子组件UU里面的Text没有变化，一直显示0
794 0 3
@viewChild只能执行一次吗？
1545 0 4
为什么要使用mixin?
898 0 2
封装icon图片
878 0 8

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
数据可视化入门到精通-打造前端差异化竞争力
  • 参与学习       1516    人
  • 提交作业       112    份
  • 解答问题       1043    个

同级别前端，掌握数据可视化薪资更高

了解课程

本课精华内容

问答 作业

请问老师为什么不是响应式

1.4k 20

npm run build无法编译vue文件

1.4k 12

更新自定义组件库不自动更新

1.3k 12

请教老师 搜索组件无法显示 且分类销售排行也没有了

1.2k 10

老师，为什么会说我要安装react相关的插件啊？？？

1.1k 10

查看更多本课问答
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号