Input 输入

示例

尺寸

可选的尺寸 ui 属性值：xs / s / m / l。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-input
      ui="l"
      value="Large"
    />
  </section>
  <section><veui-input value="Normal"/></section>
  <section>
    <veui-input
      ui="s"
      value="Small"
    />
  </section>
  <section>
    <veui-input
      ui="xs"
      value="Extra small"
    />
  </section>
</article>
</template>

<script>
import { Input } from 'veui'

export default {
  components: {
    'veui-input': Input
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

只读状态

设置 readonly 来使输入框处于只读状态。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox v-model="readonly">
      Read-only
    </veui-checkbox>
  </section>
  <section>
    <section>
      <veui-input
        :readonly="readonly"
        ui="l"
        value="Large"
      />
    </section>
    <section>
      <veui-input
        :readonly="readonly"
        value="Normal"
      />
    </section>
    <section>
      <veui-input
        :readonly="readonly"
        ui="s"
        value="Small"
      />
    </section>
    <section>
      <veui-input
        :readonly="readonly"
        ui="xs"
        value="Extra small"
      />
    </section>
  </section>
</article>
</template>

<script>
import { Input, Checkbox } from 'veui'

export default {
  components: {
    'veui-input': Input,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      readonly: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

禁用状态

设置 disabled 来使输入框处于禁用状态。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <section>
      <veui-input
        :disabled="disabled"
        ui="l"
        value="Large"
      />
    </section>
    <section>
      <veui-input
        :disabled="disabled"
        value="Normal"
      />
    </section>
    <section>
      <veui-input
        :disabled="disabled"
        ui="s"
        value="Small"
      />
    </section>
    <section>
      <veui-input
        :disabled="disabled"
        ui="xs"
        value="Extra small"
      />
    </section>
  </section>
</article>
</template>

<script>
import { Input, Checkbox } from 'veui'

export default {
  components: {
    'veui-input': Input,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

感知输入法

设置 composition 来感知输入法输入过程中的值。

Input value:
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox v-model="composition">
      Composition
    </veui-checkbox>
  </section>
  <section>Input value: {{ value }}</section>
  <section>
    <veui-input
      v-model="value"
      :composition="composition"
    />
  </section>
</article>
</template>

<script>
import { Input, Checkbox } from 'veui'

export default {
  components: {
    'veui-input': Input,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      composition: true,
      value: ''
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

过滤首尾空白字符

设置 trim 来自动过滤用户输入的首尾空白字符。

Input value: ``

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <p class="respect-whitespace">Input value: `{{ value }}`</p>
    <veui-input
      v-model="value"
      trim
    />
  </section>
</article>
</template>

<script>
import { Input } from 'veui'

export default {
  components: {
    'veui-input': Input
  },
  data () {
    return {
      composition: true,
      value: ''
    }
  }
}
</script>

<style scoped>
.respect-whitespace {
  white-space: pre;
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

值描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
l大尺寸样式。
valuestring''

v-model

输入框的值。

disabledboolean=false输入框是否为禁用状态。
readonlyboolean=false输入框是否为只读状态。
typestring='text'

输入类型。参见原生 <input> 元素的 type。

值描述
text文本输入框。
password密码输入框。
hidden隐藏的输入框，但是值允许提交。
placeholderstring=-输入占位符。
clearableboolean=false是否显示清除按钮。
compositionboolean=false是否感知输入法输入过程的值。
select-on-focusboolean=false聚焦时是否自动选中输入框文本。
get-lengthfunction(string): number=自定义的字符长度计算函数。
trimboolean | string=false

是否移除前后空格。当为 true 时，会移除前后空格，当为 false 时，不移除前后空格。设置为字符串时，按指定方式进行移除。

值描述
both移除两端空格。等同于 true 时的行为。
start移除开始空格。
end移除末尾空格。
maxlengthnumber=-最大可输入的字符长度。
strictboolean=false是否超出最大字符长度后不允许继续输入。

插槽

名称描述
before输入框内前置内容。
after输入框内后置内容。
placeholder未输入时的占位内容。

事件

名称描述
change

输入框内容变化时触发，即原生 change 事件触发时。回调参数为 (value, event)。

名称类型描述
valuestring输入框的值。
eventEvent原生 change 事件对象。
input

v-model

有效输入时触发，受 composition 属性影响。回调参数为 (value: string)，value 为输入框的 value 值。

clear点击清除按钮时触发。

此外，Input 支持如下的原生事件：

auxclick、click、contextmenu、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseover、mouseout、mouseup、select、wheel、keydown、keypress、keyup、focus、blur、focusin、focusout。

回调函数的参数都为原生事件对象。

图标

名称描述
remove清除按钮。
在 GitHub 上编辑此页面编辑