---
title: RangeInput 范围输入框
description: 用于输入范围文本，比如常见的时间范围，该组件的使用方式和input基本上保持一致。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: swimly
---

## 基本用法

通过`value`，`defaultValue`，`v-model`来设置他的值，**value：** 该方式赋值会导致组件不可操作，**defaultValue：** 通过该
方式赋值为默认值，并不会印象操作和绑值，**v-model：** 通过该方式赋值为响应式，通过`inputValue`可设置输入框的值，此属性谨
慎使用，一旦设置后期不可更改，推荐使用`defaultInputValue`替代。

{{ base }}

## 不同大小

通过`size`可设置范围输入框的大小，可选：`small`，`medium`，`large`，默认为：`medium`。

{{ size }}

## 前后容器

通过`label`可设置输入框前面的文本信息，通过`prefixIcon`可设置输入框前面的图标，通过`suffixIcon`可设置输入框后面的图标，
通过`suffix`来设置后置图标前面的内容。

{{ prefixSuffix }}

## 可清空

通过`clearable`属性可设置输入框的快捷清空功能，当输入框有值且鼠标移动到输入框，右侧会出现清空图标，通过设
置`showClearIconOnEmpty`，就算输入框没有值也会显示清空图标。

{{ clearable }}

## 设置高亮

通过`activeIndex`可设置范围输入框第几个高亮显示

{{ activeIndex }}

## 自定义间隔

通过`separator`可设置范围输入框中间的分隔内容，可以是字符串，也可以为一个组件。

{{ separate }}

## 不同状态

通过`status`可设置范围输入框不同的状态，可选：`default`，`success`，`warning`，`error`，默认为：`default`。

{{ status }}

## 禁用、只读

通过`disabled`禁用输入框的输入，通过`readonly`设置输入框的只读模式。

{{ disabled }}
