点击保存时判断输入框长度用element的消息提示

当你在Element UI的表单组件中，比如`el-form-item`中使用input元素，并希望在点击“保存”按钮前检查输入框的内容长度，你可以这样做：

首先，在模板（template）部分，添加一个v-model绑定到输入字段，例如`<el-input v-model="inputText"></el-input>`。

然后，在Vue实例中，定义一个data属性来存储输入文本，并在提交按钮的事件处理器（通常是`@submit`或自定义事件）中添加判断逻辑：

<template>
  <el-form @submit.prevent="handleSave">
    <el-form-item label="输入框">
      <el-input v-model="inputText" :maxlength="maxLength"></el-input>
      <span slot="message" class="error-message" v-if="inputText.length > maxLength">输入过长，请输入{{ maxLength }}个字符以内</span>
    </el-form-item>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      maxLength: 100, // 设定最大长度，这里假设为100字符
    };
  },
  methods: {
    handleSave() {
      if (this.inputText.length > this.maxLength) {
        alert('输入过长，请输入100个字符以内');
        return; // 或者阻止默认提交
      }
      // 如果长度正常，可以继续处理保存逻辑...
    },
  },
};
</script>

<style scoped>
.error-message {
  color: red;
}
</style>

当用户输入的字符超过设定的最大长度时，错误消息会在输入框下方显示，同时可能会弹出警告对话框。如果你需要在输入框直接禁用保存按钮，可以在条件满足时设置`disabled`属性为`true`。记得在完成验证后将`disabled`恢复为`false`。