解决elementUI 表单输入框浏览器自动填写问题

<template>
  <el-form ref="form" :model="form" @submit.native.prevent>
    <el-form-item prop="username">
      <el-input
        type="text"
        v-model="form.username"
        auto-complete="off"
        placeholder="请输入用户名"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        type="password"
        v-model="form.password"
        auto-complete="new-password"
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 登录逻辑
    }
  }
};
</script>

在这个例子中，我们使用了Element UI的el-form和el-input组件来构建一个登录表单。我们通过设置auto-complete属性为"off"来禁用浏览器的自动填写功能，确保用户输入信息时不会被浏览器自动预填。同时，我们使用了type="password"来确保密码输入框也不会被自动填写。在el-form中，我们绑定了一个submit.native.prevent事件监听器来阻止表单默认的提交行为，并且定义了一个submitForm方法来处理登录逻辑。