VueJS网格组件：如何批量将多Props的字符串转为数字？

你可以通过以下两种方式实现对cols、xs、sm、md、lg、xl这些Props的批量转换：

方法一：用计算属性生成统一的转换后尺寸对象 #

先定义需要处理的尺寸Props列表，再通过reduce方法批量转换每个值，同时保留cols对Boolean类型的兼容逻辑：

修改组件的computed部分：

computed: {
  convertedSizes() {
    // 定义需要转换的尺寸Props数组
    const sizeProps = ['cols', 'xs', 'sm', 'md', 'lg', 'xl'];
    return sizeProps.reduce((result, prop) => {
      let value = this[prop];
      // 单独处理cols的Boolean类型情况
      if (prop === 'cols') {
        result[prop] = value ? parseInt(value) : value;
      } else {
        // 其他尺寸Props直接转换为数字
        result[prop] = parseInt(value);
      }
      // 处理转换失败的情况，回退到对应Props的默认值
      if (isNaN(result[prop])) {
        result[prop] = this.$options.props[prop].default;
      }
      return result;
    }, {});
  }
}

之后在模板或组件内部使用时，通过convertedSizes.cols、convertedSizes.xs即可获取转换后的数字值：

<template>
  <div class="col-container">
    <slot>
      <div class="col">{{ convertedSizes.cols }}</div>
    </slot>
  </div>
</template>

方法二：动态生成单个计算属性（更直观） #

如果觉得对象形式不够直观，也可以在组件初始化时动态为每个尺寸Props创建单独的计算属性：

created() {
  const sizeProps = ['cols', 'xs', 'sm', 'md', 'lg', 'xl'];
  sizeProps.forEach(prop => {
    this.$options.computed[`${prop}Number`] = function() {
      let value = this[prop];
      if (prop === 'cols') {
        value = value ? parseInt(value) : value;
      } else {
        value = parseInt(value);
      }
      return isNaN(value) ? this.$options.props[prop].default : value;
    };
  });
}

使用时直接调用colsNumber、xsNumber等计算属性即可：

<template>
  <div class="col-container">
    <slot>
      <div class="col">{{ colsNumber }}</div>
    </slot>
  </div>
</template>

补充说明 #

• 加入isNaN判断是为了避免非数字字符串转换后得到NaN，确保组件能回退到预设的默认值，增强健壮性
• 针对cols的Boolean类型处理保留了你原有的逻辑，避免布尔值被错误转换为数字（比如true会被转为1）

内容的提问来源于stack exchange，提问作者Ayesha