如何解决ESLint 不知道 Element UI 的组件
我正在使用 Vue.js 和 Element UI。当我使用 Input
或 Col
等 Element UI 组件时,ESLint 将 invalid-end-tag
视为如下。
我已经设置了 eslint-plugin-vue
,为什么 ESLint 不知道自定义组件?
有没有办法解决这个错误?
<template>
<div>
<Input
v-model="formLogin.username"
type="text"
size="large"
@on-enter="handleLogin"
>
<Icon
slot="prepend"
type="ios-person-outline"
/>
</Input>
</div>
</template>
Parsing error: x-invalid-end-tag. eslint(vue/no-parsing-error) [13,5]
解决方法
<input>
或 <col>
都不是 Element UI 组件。
它们都是原生 HTML 标签,它们都是不能那样使用的自闭合标签。
-
元素 UI 使用
<el-input>
,而不是<input>
。 -
元素 UI 使用
<el-col>
,而不是<col>
。 -
要在
<el-input>
中添加图标,请使用下面显示的prefix-icon
道具或prefix
插槽
一个正确的例子:
<el-row>
<el-col :span="12">
<el-input
v-model="input"
>
<i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input>
</el-col>
</el-row>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。