TextInput文本输入框

用于输入单行文本数据

尺寸

通过 size 来设置尺寸大小可选值有 xs sm md lg xl

vue

<template>
  <div class="flex flex-col gap-y-4">
    <TextInput
      v-for="size in sizes"
      :key="size"
      v-model="text"
      :size="size"
      placeholder="请输入文本"
    />
  </div>
</template>

<script setup lang="ts">
import { TextInput, type TextInputSize } from 'li-daisy'
import { ref } from 'vue'

const sizes = ref<TextInputSize[]>(['xs', 'sm', 'md', 'lg', 'xl'])

const text = ref<string>('')
</script>

color颜色

通过 color 来设置颜色
可选值 [base,neutral,primary,secondary,accent,info,success,warning,error]

vue

<template>
  <div class="flex flex-col gap-4">
    <TextInput
      v-for="color in colors"
      :key="color"
      v-model="text"
      :color="color"
      placeholder="请输入文本"
    />
  </div>
</template>

<script setup lang="ts">
import { TextInput, type TextInputColor } from 'li-daisy'

import { ref } from 'vue'

const colors = ref<TextInputColor[]>([
  'base',
  'neutral',
  'primary',
  'secondary',
  'accent',
  'info',
  'success',
  'warning',
  'error',
])

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

使用插槽

通过 prefix 和 suffix 来设置前后插槽

0/20

vue

<template>
  <div class="flex flex-col w-full">
    <TextInput
      v-for="color in colors"
      :key="color"
      v-model="text"
      class="my-2"
      placeholder="请填写信息"
      :maxlength="20"
      type="search"
      :color="color"
    >
      <template #prefix>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"
          />
        </svg>
      </template>
      <template #suffix>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
          />
        </svg>
      </template>
    </TextInput>
  </div>
</template>

<script setup lang="ts">
import { TextInput, type TextInputColor } from 'li-daisy'

import { ref } from 'vue'

const colors = ref<TextInputColor[]>([
  'base',
  'neutral',
  'primary',
  'secondary',
  'accent',
  'info',
  'success',
  'warning',
  'error',
])

const text = ref<string>('')
</script>

最大长度

通过 maxlength 来设置最大文本长度

0/20

vue

<template>
  <div class="flex flex-col gap-4">
    <TextInput
      v-for="color in colors"
      :key="color"
      v-model="text"
      :color="color"
      placeholder="请输入文本"
      :maxlength="20"
    />
  </div>
</template>

<script setup lang="ts">
import { TextInput, type TextInputColor } from 'li-daisy'

import { ref } from 'vue'

const colors = ref<TextInputColor[]>([
  'base',
  'neutral',
  'primary',
  'secondary',
  'accent',
  'info',
  'success',
  'warning',
  'error',
])

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

禁用状态

通过 disable 来设置禁用状态

0/20

vue

<template>
  <div>
    <TextInput
      v-for="color in colors"
      :key="color"
      v-model="text"
      class="mt-2"
      placeholder="此输入框禁用"
      :color="color"
      :maxlength="20"
      :disabled="true"
    >
      <template #prefix>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"
          />
        </svg>
      </template>
      <template #suffix>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
          />
        </svg>
      </template>
    </TextInput>
  </div>
</template>

<script setup lang="ts">
import { TextInput, type TextInputColor } from 'li-daisy'

import { ref } from 'vue'

const colors = ref<TextInputColor[]>([
  'base',
  'neutral',
  'primary',
  'secondary',
  'accent',
  'info',
  'success',
  'warning',
  'error',
])

const text = ref<string>('')
</script>

输入类型

为了更好的浏览器补全，支持以下类型：
TextInput 上可用于任何文本类型
如 text、password、email、number、tel、url、search

vue

<template>
  <div class="flex flex-col gap-y-4">
    <TextInput v-model="text" placeholder="请输入文本" type="text" />
    <TextInput v-model="password" placeholder="请输入密码" type="password" />
    <TextInput v-model="email" placeholder="请输入邮件" type="email" />
    <TextInput v-model="url" placeholder="请输入URL" type="url" />
    <TextInput v-model="tel" placeholder="请输入电话" type="tel" />
    <TextInput v-model="search" placeholder="请输入搜索内容" type="search" />
    <TextInput v-model="number" placeholder="请输入数字" type="number" />
  </div>
</template>

<script setup lang="ts">
import { TextInput } from 'li-daisy'
import { ref } from 'vue'

const text = ref('')
const password = ref('')
const email = ref('')
const url = ref('')
const tel = ref('')
const search = ref('')
const number = ref<number>(0)
</script>

API

Attributes

属性值	说明	类型	默认值
type	类型	`TextInputType`	`'text'`
size	尺寸	`TextInputSize`	`'md'`
placeholder	占位符	`string`	-
disabled	是否禁用	`boolean`	`false`
maxlength	最大文本长度	`number`	-
color	颜色	`TextInputColor`	`base`
autocomplete	是否自动补全	`boolean`	`false`

Slots

插槽名	说明
prefix	前缀插槽
suffix	后缀插槽

TextInput文本输入框 ​

尺寸 ​

color颜色 ​

使用插槽 ​

最大长度 ​

禁用状态 ​

输入类型 ​

API ​

Attributes ​

Slots ​

TextInput文本输入框

尺寸

color颜色

使用插槽

最大长度

禁用状态

输入类型

API

Attributes

Slots