Vue DevUI
主题

Input 输入框

文本输入框。

何时使用

需要手动输入文字使用。

基本用法

Default

Disabled

Error

v-model对输入值做双向绑定，placeholder、autofocus等原生 input 支持的属性会被自动继承。
<template>
  <div class="devui-input-demo">
    <h4>Default</h4>

    <d-input v-model="valueBasic1" autofocus></d-input>

    <h4>Disabled</h4>

    <d-input v-model="valueBasic2" placeholder="请输入" disabled></d-input>

    <h4>Error</h4>

    <d-input v-model="valueBasic3" placeholder="请输入" error></d-input>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const valueBasic1 = ref('');
    const valueBasic2 = ref('');
    const valueBasic3 = ref('');
    return {
      valueBasic1,
      valueBasic2,
      valueBasic3,
    };
  },
});
</script>

一键清空

使用clearable属性可得到一个可一键清空的输入框，使用clear事件可在清空按钮被点击时做一些操作。

<template>
  <div class="devui-input-demo">
    <d-input v-model="valueClear" clearable @clear="handleClear" placeholder="请输入"></d-input>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const handleClear = () => {
      console.log('clear');
    };
    const valueClear = ref('');
    return {
      valueClear,
      handleClear,
    };
  },
});
</script>

密码框

使用 show-password 属性可得到一个可切换显示隐藏的密码框。

<template>
  <div class="devui-input-demo">
    <d-input v-model="valuePsw" show-password placeholder="请输入"></d-input>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const valuePsw = ref('');
    return {
      valuePsw,
    };
  },
});
</script>

尺寸

Small

Middle

Large

支持sm、md、lg三种尺寸，默认为md。
<template>
  <div>
    <h4>Small</h4>

    <d-input v-model="valueSm" size="sm" placeholder="请输入"></d-input>

    <h4>Middle</h4>

    <d-input v-model="valueMd" placeholder="请输入"></d-input>

    <h4>Large</h4>

    <d-input v-model="valueLg" size="lg" placeholder="请输入"></d-input>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const valueSm = ref('');
    const valueMd = ref('');
    const valueLg = ref('');
    return {
      valueSm,
      valueMd,
      valueLg,
    };
  },
});
</script>

带图标的输入框

要在输入框中添加图标，你可以简单地使用 prefix 和 suffix 属性。 另外， 也可以使用 prefix 和 suffix 插槽。

使用属性
使用插槽
<template>
  <div>
    <d-row :gutter="10">
      <d-col :span="3">使用属性</d-col>
      <d-col :span="9">
        <d-input v-model="valueIcon1" placeholder="请输入" suffix="close" />
      </d-col>
      <d-col :span="9">
        <d-input v-model="valueIcon2" placeholder="请输入" prefix="search" />
      </d-col>
    </d-row>
    <d-row style="margin-top: 20px" :gutter="10">
      <d-col :span="3">使用插槽</d-col>
      <d-col :span="9">
        <d-input v-model="valueIcon3" placeholder="请输入">
          <template #suffix>
            <d-icon name="close" style="font-size: inherit;"></d-icon>
          </template>
        </d-input>
      </d-col>
      <d-col :span="9">
        <d-input v-model="valueIcon4" placeholder="请输入">
          <template #prefix>
            <d-icon name="search" style="font-size: inherit;"></d-icon>
          </template>
        </d-input>
      </d-col>
    </d-row>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const valueIcon1 = ref('');
    const valueIcon2 = ref('');
    const valueIcon3 = ref('');
    const valueIcon4 = ref('');
    return {
      valueIcon1,
      valueIcon2,
      valueIcon3,
      valueIcon4,
    };
  },
});
</script>

复合型输入框

可以在输入框前后添加一个元素，通常是标签或按钮。

https://
.com
<template>
  <div>
    <d-input v-model="valueSlot1" placeholder="请输入">
      <template #prepend>https://</template>
    </d-input>

    <d-input class="devui-input-demo__mt" v-model="valueSlot2" placeholder="请输入">
      <template #prepend>
        <d-select v-model="valueSlot5" :options="options"></d-select>
      </template>
      <template #append>
        <d-icon name="search" style="font-size: inherit;" />
      </template>
    </d-input>

    <d-input class="devui-input-demo__mt" v-model="valueSlot3" placeholder="请输入">
      <template #append>.com</template>
    </d-input>

    <d-input class="devui-input-demo__mt" v-model="valueSlot4" placeholder="请输入">
      <template #append>
        <d-button icon="search"></d-button>
      </template>
    </d-input>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const items = ['http://', 'https://'];
    const options = reactive(items);
    const valueSlot1 = ref('');
    const valueSlot2 = ref('');
    const valueSlot3 = ref('');
    const valueSlot4 = ref('');
    const valueSlot5 = ref('');
    return {
      valueSlot1,
      valueSlot2,
      valueSlot3,
      valueSlot4,
      valueSlot5,
      options,
    };
  },
});
</script>

输入框方法 

<template>
  <div class="devui-input-demo">
    <d-input ref="demoInput" v-model="valueFunc" placeholder="请输入"></d-input>
    <d-button style="margin-top: 20px" @click="select" color="primary">选中input中的文字</d-button>
    <d-button style="margin-left: 10px" @click="focus" color="primary">使input获取焦点</d-button>
    <d-button style="margin-left: 10px" @click="blur" color="primary">使input失去焦点</d-button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const demoInput = ref(null);
    const select = () => {
      demoInput.value.select();
    };
    const focus = () => {
      demoInput.value.focus();
    };
    const blur = () => {
      demoInput.value.blur();
    };
    const valueFunc = ref('测试文本');
    return {
      demoInput,
      valueFunc,
      select,
      focus,
      blur,
    };
  },
});
</script>

Input 参数

参数名类型默认值说明跳转 Demo
v-modelstring''绑定值基本用法
placeholderstring''输入框占位文本基本用法
disabledbooleanfalse可选，文本框是否被禁用基本用法
errorbooleanfalse可选，文本框是否出现输入错误基本用法
sizeInputSize'md'可选，文本框尺寸，有三种选择'lg','md','sm'尺寸
validate-eventbooleantrue可选，输入时是否触发表单的校验
prefixstring-可选，自定义前缀图标带图标的输入框
suffixstring-可选，自定义后缀图标带图标的输入框
show-passwordbooleanfalse可选，是否显示为密码框
clearablebooleanfalse可选，是否可清空一键清空
namestring''等价于原生 input name 属性
readonlybooleanfalse原生 readonly 属性，是否只读
autocompletestring'off'原生 autocomplete 属性
autofocusbooleanfalse自动获取焦点

Input 插槽

名称说明跳转 Demo
prefix输入框头部内容带图标的输入框
suffix输入框尾部内容带图标的输入框
prepend输入框前置内容复合型输入框
append输入框后置内容复合型输入框

Input 事件

事件名回调参数说明
focusFunction(e: FocusEvent)获取焦点时触发
blurFunction(e: FocusEvent)失去焦点时触发
inputFunction(e: Event)输入值改变时触发
changeFunction(e: Event)输入框失去焦点或按下回车时触发
keydownFunction(e: KeyboardEvent)按下按键时触发
clear-在点击由 clearable 属性生成的清空按钮时触发

Input 方法

方法说明参数
focus使 input 获取焦点-
blur使 input 失去焦点-
select选中 input 中的文字-

Input 类型定义

InputSize 

type InputSize = 'sm' | 'md' | 'lg';
Contributors
粤A2-20044005号