数字范围

用于表单输入数字范围。

全局配置

在全局配置组件属性。

NumberRange组件属性配置

app.provide(NUMBER_RANGE_KEY, {
  maxPlaceholder: '最大值',
  minPlaceholder: '最小值',
  rangeSeparator: '至',
  // others props...
});

基础用法

设置范围

通过min和max属性可以设置允许输入的范围。

属性

属性名	说明	类型	默认值
model-value / v-model	输入的数字范围数组	number[]	[]
min	允许输入的最小值	number	-Infinity
max	允许输入的最大值	number	Infinity
min-placeholder	输入范围时最小值的占位内容	string	最小值
max-placeholder	输入范围时最大值的占位内容	string	最大值
range-separator	输入范围时的分隔符	string	至
disabled	是否禁用	boolean	false

类型声明

/**
 * 数字范围组件属性
 */
export interface NumberRangeProps {
  /**
   * 绑定值
   */
  modelValue?: number[];
  /**
   * 最小值
   * @defaultValue -Infinity
   */
  min?: number;
  /**
   * 最大值
   * @defaultValue Infinity
   */
  max?: number;
  /**
   * 输入范围时最小值的占位内容
   * @defaultValue '最小值'
   */
  minPlaceholder?: string;
  /**
   * 输入范围时最大值的占位内容
   * @defaultValue '最大值'
   */
  maxPlaceholder?: string;
  /**
   * 输入范围时的分隔符
   * @defaultValue '至'
   */
  rangeSeparator?: string;
  /**
   * 是否禁用
   * @defaultValue false
   */
  disabled?: boolean;
}