前言
在周末的时候更新了WebStorm
的2022.03版本,更新过后就发现了之前写的项目里面会有label 不是 slot 的有效值。预期值:
的警告爆出来,在百度以及google的搜索中并没有找到相关的问题,于是便在官网发起了问题求助!
正文
我的代码是这样的
<el-descriptions class="margin-top" :title="'订单'+drawerData.order+'详情'" :column="1" border>
<template slot="extra">
<el-button type="danger" size="small">发起工单</el-button>
</template>
<el-descriptions-item :labelStyle="{'width': '15%'}">
<template slot="label">
订单号
</template>
<span @click="copy(drawerData.order)">{{ drawerData.order }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
商品名称
</template>
{{ drawerData.name }}
</el-descriptions-item>
</el-descriptions>
然后 控制台呢就报了一个label 不是 slot 的有效值。预期值:
的警告,具体的就是图里这个了
这个警告我在IDE的设置里面并没有找到相关的设置,刚开始我以为是什么插件没有兼容2022.03版本导致的,于是便把一些相关的插件卸载了,发现问题还是一样的存在,所以我在官网提交了问题。
根据官网给我的答复就是:IDE是解析不了element
的,所以才造成了这个问题(其实我在想我上一个版本并没有出现这个问题),然后为了vue
组件库的代码完整性,他们有一个叫web-types
的的元数据格式,然后在element
的2.15.12版本的源代码里我确实看到了这个文件的,但是在npm
包里没有这个文件,所以导致了组件和插槽是一个未知的WebStorm
无法解析的状态
具体的回复如下(我也针对上一版本没有警告做出了回复,但是并没有给出为什么上一版本没有爆警告的原因):
具体的issues
:https://github.com/ElemeFE/element/issues/22261
解决办法
目前我的解决办法是在element
的代码仓库手动下载web-types.json
文件放到node_modules/element-ui
目录下,然后重启WebStorm
之后就解决了
最后
希望此篇文章能帮到一些同学