ESLint 不知道 Element UI 的组件

Question

我正在使用 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]

Answer 1

<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>