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移除末尾空格。

插槽

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

事件

名称描述
change

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

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

v-model

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

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

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

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

图标

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