Installation
基本用法
基本用法
<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>
http://
.com
http://.com
http://.com
前置/后置标签
用于配置一些固定组合。
<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>
$rmb
$rmb
前缀和后缀
在输入框上添加前缀或后缀图标。
<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>