Input 输入框

介绍

通过鼠标或键盘输入内容，是最基础的表单域的包装。

何时使用

需要用户输入表单域内容时。

代码演示

输入框基础用法

这是一个input输入框最基本的使用例子

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const value = ref('')
const inputRef = ref()
onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input v-model="value" />
  </div>
  {{ value }}
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const value = ref('')
const inputRef = ref()
onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input v-model="value" />
  </div>
  {{ value }}
</template>

输入框尺寸

这是一个input输入框尺寸的使用例子。

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input v-model="value" size="large" />
    <t-input v-model="value" />
    <t-input v-model="value" size="small" />
  </div>
</template>

<style scoped>

</style>

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input v-model="value" size="large" />
    <t-input v-model="value" />
    <t-input v-model="value" size="small" />
  </div>
</template>

<style scoped>

</style>

输入框禁用

这是一个input输入框禁用的使用例子。

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input v-model="value" size="large" disabled />
    <t-input v-model="value" disabled />
    <t-input v-model="value" size="small" disabled />
  </div>
</template>

<style scoped>

</style>

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input v-model="value" size="large" disabled />
    <t-input v-model="value" disabled />
    <t-input v-model="value" size="small" disabled />
  </div>
</template>

<style scoped>

</style>

A B

使用输入框插槽

我们可以通过prefix和suffix插槽来自定义输入框的前后缀。

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input v-model="value" size="small">
      <template #prefix>
        A
      </template>
      <template #suffix>
        B
      </template>
    </t-input>
  </div>
</template>

<style scoped>

</style>

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input v-model="value" size="small">
      <template #prefix>
        A
      </template>
      <template #suffix>
        B
      </template>
    </t-input>
  </div>
</template>

<style scoped>

</style>

输入框聚焦

这是一个input输入框聚焦的使用例子

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const value = ref('')
const inputRef = ref()
onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input ref="inputRef" v-model="value" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const value = ref('')
const inputRef = ref()
onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 10px">
    <t-input ref="inputRef" v-model="value" />
  </div>
</template>

属性

属性	说明	类型	默认值
placeholder	内容占位符	string	请输入
disabled	是否禁用输入框	boolean	-
size	输入框大小	default	small

事件

事件	说明	类型
change	数据发生改变的时候触发	(value:string) => void

插槽

插槽	说明	类型
prefix	前置插槽	()=>any
suffix	后置插槽	()=>any

方法

方法	说明	类型
focus	聚焦事件方法	() => void
blur	失去焦点的方法	()=>void