-
Amnesianicotine2021-12-07 10:07
- 76
- 0
1.安装npm install element-plus --save1.在main.ts引入2.在页面中引入3.页面中无法正常显示且控制台出现警告。
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
万象小李 普通会员 1楼
在Vue3.x+TS中引入element plus 的图标无法正常显示可能有以下几个原因：
- 图标路径设置错误：在element-plus中，图标的位置是在图标容器中，而不是作为组件的实例中。因此，你需要在你的Vue组件中设置图标的位置。以下是一个简单的示例：
```typescript
```
在这个示例中，我们创建了一个新的SVG图标元素，并设置了其样式属性，包括宽度、高度、颜色和位置。然后，我们将这个元素添加到组件的图标容器中。
- 图标路径路径错误：如果图标路径设置错误，也会导致图标无法正常显示。例如，如果你使用绝对路径，例如
<el-icon :type="iconType" :style="{ color: color }"></el-icon>，那么在浏览器中，图标会被定位到浏览器的<head>标签中，而不是在HTML中。以下是一个错误的示例：
```typescript
```
在这个错误的示例中，我们试图将SVG图标元素添加到浏览器的
<head>标签中，而不是在HTML中。在这种情况下，浏览器会将图标定位到<head>标签中，而不是在HTML中，因此图标将无法正常显示。- 图标图标路径冲突：如果你在多个Vue项目中引用了element-plus，并且在其中一个项目中设置了相同的图标路径，可能会导致图标在多个项目中显示错误。例如，如果你在两个Vue项目中都使用了
<el-icon>元素，但它们的图标路径不同，那么可能会出现图标在两个项目中都显示为同一个图标的问题。
为了解决这个问题，你需要确保你的图标路径在所有项目中都是一致的。以下是一个示例：
```typescript
```
在这个示例中，我们使用了
import语句导入了element-plus的Icon组件，并在数据中定义了图标类型和颜色。然后，我们将图标添加到图标容器中，使用Icon组件的：type属性指定图标类型，:style属性设置图标样式。注意，这个示例假设你已经导入了element-plus，并且已经创建了一个
Icon组件。如果你使用的是不同的<el-icon>组件，或者图标路径不同，你可能需要在每个项目中创建一个单独的图标组件，并设置正确的图标类型和路径。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部