el-input 如何实时提示用户 限制输入的字符类型为数字、字母和下划线，输入长度为8-32 并在输入框下方进行提示 且输入为空时提示需要输入

可以使用以下代码实现：

<template>
  <div>
    <el-input v-model="inputValue" maxlength="32" placeholder="请输入8-32位数字、字母或下划线" @input="handleInput"></el-input>
    <el-tooltip v-if="showTooltip" content="请输入8-32位数字、字母或下划线" placement="bottom-start">
      <i class="el-icon-warning"></i>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showTooltip: false,
    };
  },
  methods: {
    handleInput() {
      if (!/^[a-zA-Z0-9_]{8,32}$/.test(this.inputValue)) {
        this.showTooltip = true;
      } else {
        this.showTooltip = false;
      }
    },
  },
};
</script>

该代码定义一个 `inputValue` 变量来绑定输入框的值，并使用正则表达式 `/^[a-zA-Z0-9_]{8,32}$/` 来限制输入的字符类型和长度（8-32位数字、字母或下划线）。同时，使用 `maxlength` 属性来限制输入框的长度。在输入框下方，使用 `el-tooltip` 组件显示提示信息，当输入不符合要求时显示提示信息，否则不显示。在 `handleInput` 方法中判断输入的值是否符合要求，如果不符合则显示提示信息。