前端 - el-input框输入的问题?

Question

el-input框输入的问题
el-input是通过封装的，在data里面是这样使用的，代码如下
userName: {

type: 'input',label: '用户名',required: true,

},
现在的赋值
const res = await getCompanyInfo()

 this.formData.userName = res.data.companyCodeif (this.formData.userName.length <= 5) {  this.formData.userName = res.data.companyCode.slice(0, 5);}

res.data.companyCode是接口api返回来的数据固定的字段，显示在页面上
现在的需求是 返回来的字段是固定的不能让客户删除，只能在固定的字段后面添加跟删除，现在想要在input里面监听@input="handleInput" 可是在data里怎么写上@input="handleInput"，如果不在data里面写@input="handleInput"这个 ，大佬们，在this.formData.userName = res.data.companyCode又该怎么实现前面的字段是固定的，后面的字符可增可减呢

if (this.formData.userName.length <= 5) {

  this.formData.userName = res.data.companyCode.slice(0, 5);}

尝试着这样写 没效果， input框里光标 还会把固定的字段清空

Answer 1

是这种效果吗？

<template>  <el-input v-model="reSetVal" v-append-text="preVal" @change="$emit('change', $event)"></el-input></template><script>export default {  name: "testComponent",  model: {    prop: 'value',    event: 'change'  },  props: ["value"],  directives: {    appendText: {      update(el, binding, vnode) {        el.addEventListener('input', function(event) {          if(event.target.value.length < binding.value.length){            vnode.componentInstance.$emit('input', binding.value);          }        });      }    }  },  watch:{    value(newVal, oldVal){      this.reSetVal = newVal;      this.preVal = newVal.slice(0, 5);    }  },  data(){    return {      preVal: "",      reSetVal: ""    }  }}</script>

Answer 2

既然返回的字段是固定的，直接用prepend带在input前面不就行了吗？

Answer 3

修改封装的组件 使其支持自定义input事件

Answer 4

为了实现您的需求，即让 el-input 框中的前五个字符固定不可删除，但可以在后面添加和删除字符，您需要做一些调整。这里的关键在于监听输入框的输入事件，并在事件处理函数中控制输入内容。

首先，您不能在 data 对象中直接绑定 @input 事件，因为 data 对象用于存储数据，而不是处理事件。事件应该在模板中绑定到对应的 DOM 元素上。

接下来，您需要在模板中的 el-input 组件上绑定 @input 事件，并指向一个处理函数。在这个处理函数中，您可以检查输入内容，并确保前五个字符与 res.data.companyCode 的前五个字符相同。

以下是一个示例代码，展示了如何实现这个功能：

<template>  <el-input    v-model="inputValue"    @input="handleInput"    :maxlength="maxLength"    placeholder="请输入内容"  ></el-input></template><script>export default {  data() {    return {      inputValue: '', // 用于绑定输入框的值      maxLength: 10, // 根据需要设置最大长度      fixedPrefix: '', // 用于存储固定的前缀    };  },  async created() {    const res = await getCompanyInfo();    this.fixedPrefix = res.data.companyCode.slice(0, 5); // 获取前五个字符作为固定前缀    this.inputValue = this.fixedPrefix; // 初始化输入框的值  },  methods: {    handleInput(value) {      // 确保前五个字符与固定前缀相同      if (value.slice(0, 5) !== this.fixedPrefix) {        value = this.fixedPrefix + value.slice(5);      }      // 更新输入框的值      this.inputValue = value;    },  },};</script>

在这个示例中，inputValue 用于双向绑定输入框的值。handleInput 方法会在每次输入时被调用，并检查输入内容。如果前五个字符与 fixedPrefix 不同，则将它们替换为 fixedPrefix。这样，用户就不能删除前五个字符了。您可以根据需要调整 maxLength 来限制输入框的最大长度。