Element UI 在非template/render 模式下使用ICON要注意的问题

发布时间 2023-08-07 16:19:01作者: Easy C#

有很多时候,我们不需要编译Vue和Element UI,只是想简单的试用一下,做一个原型出来。我们会使用HTML方式编写,这种方式下,使用ICON需要注意一些问题。

1.例如CopyDocument图标,如果是用html tag方式调用,根据vue的组件规范,驼峰格式需要改写成小写横线分割的格式<copy-document></copy-document>

2.如果是使用<el-button :icon="CopyDocument">Button</el-button>方式调用,那么需要改成<el-button icon="CopyDocument">Button</el-button>的方式调用。去掉冒号。

3.有些简单的图标,因为vue在非template/render模式下,和原生HtmlElement Tag有冲突,所以需要写为完整的Tag,例如<Plus />要写成<Plus></Plus>,否则会出现此标签后续Vue都不能识别的问题。页面会出现空白。