Input 输入框

通过鼠标或键盘输入字符

基础用法

基础的输入框用法。

<template>
  <my-input
    v-model="input"
    placeholder="Please input"
    style="width: 240px"
  />
</template>

<script setup>
  import { ref } from 'vue'

  const input = ref('')
</script>

禁用状态

通过 disabled 属性指定是否禁用 input 组件

<template>
  <my-input
    v-model="input"
    style="width: 240px"
    disabled
    placeholder="Please input"
  />
</template>

<script setup>
  import { ref } from 'vue'

  const input = ref('')
</script>

一键清空

使用clearable属性即可得到一个可一键清空的输入框

<template>
  <my-input
    v-model="input"
    style="width: 240px"
    placeholder="Please input"
    clearable
  />
</template>

<script setup>
  import { ref } from 'vue'

  const input = ref('')
</script>

密码框

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

<template>
  <my-input
    v-model="input"
    style="width: 240px"
    type="text"
    placeholder="Please input password"
    show-password
  />
</template>

<script setup>
  import { ref } from 'vue'

  const input = ref('')
</script>

带图标的输入框

带有图标标记输入类型

要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。另外， prefix 和 suffix 命名的插槽也能正常工作

Using attributes

Using slots

<template>
  <div class="flex gap-4 mb-4">
    <span>Using attributes</span>
    <my-input
      v-model="input1"
      style="width: 240px"
      placeholder="Pick a date"
      suffix-icon="share-from-square"
    />
    <my-input
      v-model="input2"
      style="width: 240px"
      placeholder="Type something"
      prefix-icon="hand-pointer"
    />
  </div>
  <div class="flex gap-4">
    <span>Using slots</span>
    <my-input
      v-model="input3"
      style="width: 240px"
      placeholder="Pick a date"
    >
      <template #suffix>
        <my-icon icon="share-from-square"></my-icon>
      </template>
    </my-input>
    <my-input
      v-model="input4"
      style="width: 240px"
      placeholder="Type something"
    >
      <template #prefix>
        <my-icon icon="hand-pointer"></my-icon>
      </template>
    </my-input>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const input1 = ref('')
  const input2 = ref('')
  const input3 = ref('')
  const input4 = ref('')
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .gap-4 {
    gap: 1rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }
</style>

文本域

用于输入多行文本信息可缩放的输入框。添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

文本域高度可通过 rows 属性控制

<template>
  <my-input
    v-model="textarea"
    style="width: 240px"
    :rows="2"
    type="textarea"
    placeholder="Please input"
  />
</template>

<script setup>
  import { ref } from 'vue'

  const textarea = ref('')
</script>

复合型输入框

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

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

Http://

.com

<template>
  <div>
    <my-input
      v-model="input1"
      style="max-width: 600px"
      placeholder="Please input"
    >
      <template #prepend>Http://</template>
    </my-input>
  </div>
  <div class="mt-4">
    <my-input
      v-model="input2"
      style="max-width: 600px"
      placeholder="Please input"
    >
      <template #append>.com</template>
    </my-input>
  </div>
  <div class="mt-4">
    <my-input
      v-model="input3"
      style="max-width: 600px"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <my-select
          v-model="select"
          placeholder="Select"
          style="width: 115px"
        >
          <my-option
            label="Restaurant"
            value="1"
          />
          <my-option
            label="Order No."
            value="2"
          />
          <my-option
            label="Tel"
            value="3"
          />
        </my-select>
      </template>
      <template #append>
        <my-button icon="magnifying-glass" />
      </template>
    </my-input>
  </div>
  <div class="mt-4">
    <my-input
      v-model="input3"
      style="max-width: 600px"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <my-button :icon="Search" />
      </template>
      <template #append>
        <my-select
          v-model="select"
          placeholder="Select"
          style="width: 115px"
        >
          <my-option
            label="Restaurant"
            value="1"
          />
          <my-option
            label="Order No."
            value="2"
          />
          <my-option
            label="Tel"
            value="3"
          />
        </my-select>
      </template>
    </my-input>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const input1 = ref('')
  const input2 = ref('')
  const input3 = ref('')
  const select = ref('')
</script>

<style>
  .mt-4 {
    margin-top: 1rem;
  }

  .input-with-select .my-input-group__prepend {
    background-color: var(--my-fill-color-blank);
  }
</style>

尺寸

使用 size 属性改变输入框大小。除了默认大小外，还有另外两个选项： large, small。

<template>
  <div class="flex gap-4 mb-4">
    <my-input
      v-model="input1"
      style="width: 240px"
      size="large"
      placeholder="Please Input"
    />
    <my-input
      v-model="input2"
      style="width: 240px"
      placeholder="Please Input"
    />
    <my-input
      v-model="input3"
      style="width: 240px"
      size="small"
      placeholder="Please Input"
    />
  </div>
  <div class="flex gap-4 mb-4">
    <my-input
      v-model="input1"
      style="width: 240px"
      size="large"
      placeholder="Please Input"
      suffix-icon="magnifying-glass"
    />
    <my-input
      v-model="input2"
      style="width: 240px"
      placeholder="Please Input"
      suffix-icon="magnifying-glass"
    />
    <my-input
      v-model="input3"
      style="width: 240px"
      size="small"
      placeholder="Please Input"
      suffix-icon="magnifying-glass"
    />
  </div>
  <div class="flex gap-4">
    <my-input
      v-model="input1"
      style="width: 240px"
      size="large"
      placeholder="Please Input"
      prefix-icon="magnifying-glass"
    />
    <my-input
      v-model="input2"
      style="width: 240px"
      placeholder="Please Input"
      prefix-icon="magnifying-glass"
    />
    <my-input
      v-model="input3"
      style="width: 240px"
      size="small"
      placeholder="Please Input"
      prefix-icon="magnifying-glass"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const input1 = ref('')
  const input2 = ref('')
  const input3 = ref('')
</script>

<style lang="css" scoped>
  .flex {
    display: flex;
    align-items: center;
  }

  .gap-4 {
    gap: 1rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }
</style>

API

Attributes

属性名	说明	类型	默认值
`modelValue`	输入框的值	`string` / `number`	—
`type`	输入框类型	`NativeType` / `textarea`	`text`
`size`	输入框尺寸	`small` / `large`	—
`disabled`	是否禁用	`boolean` / `false`	—
`clearable`	是否可清空	`boolean` / `false`	—
`showPassword`	是否显示密码切换按钮	`boolean` / `false`	—
`prefixIcon`	前缀图标	`string`	—
`suffixIcon`	后缀图标	`string`	—
`placeholder`	占位文本	`string`	—
`rows`	文本域行数	`number`	—

Event

事件名	说明	类型
`update:modelValue`	输入框值更新时触发	`(value: string \| number) => void`
`change`	输入框值改变时触发	`(value: string \| number) => void`
`clear`	点击清空按钮时触发	`() => void`

Slots

插槽名	说明
`prepend`	输入框前置内容
`append`	输入框后置内容
`prefix`	输入框前缀内容
`suffix`	输入框后缀内容

Expose

名称	说明	类型
`clear`	清空输入框内容	`() => void`
`blur`	使输入框失去焦点	`() => void`
`focus`	使输入框获得焦点	`() => void`
`select`	选中输入框中的文字	`() => void`
`ref`	输入框 DOM 引用	`Ref<HTMLInputElement>`

Input 输入框 ​

基础用法 ​

禁用状态 ​

一键清空 ​

密码框 ​

带图标的输入框 ​

文本域 ​

复合型输入框 ​

尺寸 ​

API ​

Attributes ​

Event ​

Slots ​

Expose ​