ESLint不知道元素UI的组件

Question

我使用的是Vue.js和元素UI。当我使用元素UI组件(如Input或Col )时，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

或都不是元素UI组件。

它们都是本地HTML标记，它们都是不能以这种方式使用的自关闭标记。

• 元素UI使用的是，而不是

• 元素UI使用的是，而不是

• 若要在<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>