基本用法

<script setup lang="ts">
  import { Input } from '@lite-space/ui'
</script>

<template>
  <Input placeholder="Please Input" />
</template>

使用 size 设置输入框的大小。

<script setup lang="ts">
  import { Input, Space } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical">
    <Input size="small" placeholder="Please Input" />
    <Input size="default" placeholder="Please Input" />
    <Input size="large" placeholder="Please Input" />
  </Space>
</template>

用于配置一些固定组合。

<script setup lang="ts">
  import { Input, Space } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical">
    <Input addon-before="http://" placeholder="default size" />
    <Input addon-after=".com" placeholder="default size" />
    <Input addon-before="http://" placeholder="default size" addon-after=".com" />
    <Input placeholder="default size">
      <template #addonBefore>
        <span>http://</span>
      </template>
      <template #addonAfter>
        <span>.com</span>
      </template>
    </Input>
  </Space>
</template>

在输入框上添加前缀或后缀图标。

<script setup lang="ts">
  import { Input, Space } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical">
    <Input prefix="i-carbon:user-avatar" placeholder="default size" suffix="i-carbon:customer" />
    <Input prefix="$" placeholder="default size" suffix="rmb" />
    <Input placeholder="default size" suffix="rmb">
      <template #prefix>
        <span>$</span>
      </template>
      <template #suffix>
        <span>rmb</span>
      </template>
    </Input>
    <Input
      disabled
      prefix="i-carbon:user-avatar"
      placeholder="default size"
      suffix="i-carbon:customer"
    />
  </Space>
</template>

密码框。

<script setup lang="ts">
  import { Button, InputPassword } from '@lite-space/ui'

  const visible = ref(true)
  function handleChange(data: boolean) {
    console.log('data', data)
  }
</script>

<template>
  <InputPassword
    v-model:visible="visible"
    @change="handleChange"
  >
    <template #suffix>
      <span>123</span>
    </template>
  </InputPassword>
  <Button type="primary" @click="visible = !visible">
    {{ visible }}
  </Button>
</template>

带移除图标的输入框，点击图标删除所有内容。

<script setup lang="ts">
  import { Input } from '@lite-space/ui'

  function handleClear() {
    console.log('clear')
  }
</script>

<template>
  <Input
    clearable
    placeholder="clearable"
    @clear="handleClear"
  />
</template>

用于多行输入。

<script setup lang="ts">
  import { Space, TextArea } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical">
    <TextArea />
    <TextArea :resize="false" />
  </Space>
</template>