elementui input 输入触发方法

在 ElementUI 中，可以通过 `@input` 事件来监听 input 输入框的输入事件。具体方法如下：

<el-input v-model="inputValue" @input="handleInput"></el-input>

export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput(val) {
      console.log(val)
      // 处理输入事件
    }
  }
}

在这个例子中，我们监听了 `@input` 事件，并将输入框的值绑定到了 `inputValue` 变量上。当输入框的值发生变化时，会调用 `handleInput` 方法来处理输入事件。其中，`val` 参数表示输入框当前的值。

相关问题

elementui input校验

Element UI 提供了丰富的表单验证可以用于校验输入框。你可以通过以下步骤进行 Element UI Input 校验：

1. 首先，确保已经引入 Element UI 组件库并进行了相关配置。

2. 在需要进行校验的表单中，使用 `<el-form>` 组件包裹起来，并设置合适的校验规则和绑定的数据。

3. 在需要校验的 `<el-input>` 组件上，使用 `:rules` 属性绑定相应的校验规则。

4. 定义校验规则对象，可以使用内置的验证规则，也可以自定义验证规则。

下面是一个示例代码，展示了如何在 Element UI 中进行输入框校验：

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></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: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 校验通过，提交表单
          // do something
        } else {
          // 校验不通过，提示用户错误信息
        }
      });
    }
  }
};
</script>

在上述示例中，`rules` 对象定义了两个校验规则，其中 `required` 表示必填项，`message` 是提示信息，`trigger` 定义了何时触发校验。

当点击提交按钮时，通过 `this.$refs.form.validate` 方法进行表单校验，校验结果会传入回调函数中。如果校验通过，可以执行相应的操作；如果校验不通过，可以提示用户相应的错误信息。

这只是一个简单的示例，你可以根据具体业务需求进行更复杂的校验规则定义和处理。详细的文档可以参考 Element UI 官方文档：[https://element-plus.org/#/en-US/component/form](https://element-plus.org/#/en-US/component/form)

elementui 输入框输入自动搜索

要实现elementui输入框输入自动搜索，你可以使用elementui中的el-autocomplete组件。该组件提供了自动完成的功能，它可以根据用户在输入框中输入的值从服务器获取数据并显示在下拉列表中。

以下是实现elementui输入框输入自动搜索的步骤：

1. 在页面中引入elementui库和axios库。

<!-- 引入elementui库 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 使用el-autocomplete组件创建一个输入框和下拉列表。

<el-autocomplete
  v-model="inputValue"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  :trigger-on-focus="false"
></el-autocomplete>

在上面的代码中，我们使用v-model绑定输入框的值。fetch-suggestions属性指定了当用户输入内容时从服务器获取数据的方法。placeholder属性设置了输入框的占位符。trigger-on-focus属性指定了当输入框获得焦点时是否自动触发搜索。

3. 在Vue实例中定义querySearchAsync方法，并在该方法中使用axios从服务器获取数据。

new Vue({
  el: '#app',
  data: {
    inputValue: '',
    options: []
  },
  methods: {
    querySearchAsync(queryString, cb) {
      axios.get('https://api.example.com/search', {
        params: {
          q: queryString
        }
      }).then(response => {
        this.options = response.data.results;
        cb(this.options);
      }).catch(error => {
        console.log(error);
      });
    }
  }
});

在上面的代码中，我们定义了querySearchAsync方法，并在该方法中使用axios从服务器获取数据。该方法接收两个参数：queryString和cb。queryString是用户在输入框中输入的值，我们将其作为参数传递给服务器。cb是一个回调函数，我们将从服务器获取的数据传递给该函数，以便将数据显示在下拉列表中。

4. 最后，你需要在页面中创建一个Vue实例，并将步骤2和步骤3中的代码添加到Vue实例中。

<div id="app">
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    :trigger-on-focus="false"
  ></el-autocomplete>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    inputValue: '',
    options: []
  },
  methods: {
    querySearchAsync(queryString, cb) {
      axios.get('https://api.example.com/search', {
        params: {
          q: queryString
        }
      }).then(response => {
        this.options = response.data.results;
        cb(this.options);
      }).catch(error => {
        console.log(error);
      });
    }
  }
});
</script>

现在，当用户在输入框中输入内容时，el-autocomplete组件会自动搜索并显示下拉列表。当用户从下拉列表中选择一个选项时，该选项的值会自动填充到输入框中。