使用 Element UI 的 el-input-number 和 el-input 生成随机数编码

本教程将介绍如何使用 Element UI 的 el-input-number 和 el-input 组件，结合 ES6 语法，实现根据用户输入生成随机数编码的功能。

需求:

限制 ruleDetailsContent 输入框只能输入字母和数字。
根据 ruleDetailsContent 输入的值，在 ruleDetailsMeaning 中生成相应位数的随机数。

解决方案:

使用正则表达式限制输入:

可以使用 pattern 属性来设置 el-input-number 组件的输入限制。例如，使用 /^[a-zA-Z0-9]+$/ 只允许输入字母和数字。

<el-input-number v-model="ruleDetailsContent" class="mx-4" :min="0" 
                 @input="contentInput" controls-position="right" 
                 style="width: 100%;" :pattern="/^[a-zA-Z0-9]+$/"/>

根据输入值生成随机数:

在 contentInput 方法中，根据 ruleDetailsContent 的长度判断生成随机数的位数，然后使用 ES6 的模板字符串和随机数生成函数 Math.random() 生成随机数，并赋值给 ruleDetailsMeaning。

methods: {
  contentInput() {
    let randomNum = '';
    if (this.ruleDetailsContent.length <= 3) {
      randomNum = Math.floor(Math.random() * 10).toString();
    } else if (this.ruleDetailsContent.length <= 6) {
      randomNum = Math.floor(Math.random() * 100).toString().padStart(2, '0');
    } else {
      randomNum = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
    }
    this.ruleDetailsMeaning = `${this.ruleDetailsContent}${randomNum}`;
  }
}

完整代码示例:

<template>
  <div>
    <el-input-number v-model="ruleDetailsContent" class="mx-4" :min="0" 
                     @input="contentInput" controls-position="right" 
                     style="width: 100%;" :pattern="/^[a-zA-Z0-9]+$/"/>
    <el-input v-model="ruleDetailsMeaning" placeholder="请输入编码含义" style="width: 100%;" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleDetailsContent: '',
      ruleDetailsMeaning: ''
    };
  },
  methods: {
    contentInput() {
      let randomNum = '';
      if (this.ruleDetailsContent.length <= 3) {
        randomNum = Math.floor(Math.random() * 10).toString();
      } else if (this.ruleDetailsContent.length <= 6) {
        randomNum = Math.floor(Math.random() * 100).toString().padStart(2, '0');
      } else {
        randomNum = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
      }
      this.ruleDetailsMeaning = `${this.ruleDetailsContent}${randomNum}`;
    }
  }
};
</script>

注意:

代码中的 ruleDetailsContent 和 ruleDetailsMeaning 可以根据实际情况进行调整。
随机数的生成逻辑可以根据具体需求进行修改。

通过以上步骤，我们成功实现了使用 Element UI 组件和 ES6 语法生成随机数编码的功能。

使用 Element UI 的 el-input-number 和 el-input 生成随机数编码