Input 输入框

通过鼠标或键盘输入字符

基础文本框

<script setup>
import { ref } from 'vue'
import { CbInput as Input } from '@ptpchips/carbon-ui'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="基础文本框，请输入" style="width: 240px" />
</template>

禁用文本框

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

<script setup>
import { ref } from 'vue'
import { CbInput as Input } from '@ptpchips/carbon-ui'
const test = ref('some text')
</script>
<template>
  <Input v-model="test" disabled style="width: 240px" />
</template>

尺寸

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

<script setup>
import { ref } from 'vue'
import { CbInput as Input } from '@ptpchips/carbon-ui'
const test = ref('')
</script>
<template>
  <div class="size-holder">
    <Input
      v-model="test"
      placeholder="大的 Input"
      size="large"
      style="width: 240px; margin-right: 20px"
    >
    </Input>
    <Input v-model="test" placeholder="普通的 Input" style="width: 240px; margin-right: 20px">
    </Input>
    <Input v-model="test" placeholder="小的 Input" size="small" style="width: 240px"> </Input>
  </div>
</template>
<style scoped>
.size-holder {
  display: flex;
  align-items: center;
}
</style>

复合型输入框

可以在输入框前置或后置一个元素，通常是标签或按钮。可以使用 prepend 和 append 插槽。 要在输入框中添加前后元素，可以使用 prefix 和 suffix 插槽。

Https://

.com

<script setup>
import { ref } from 'vue'
import { CbInput as Input } from '@ptpchips/carbon-ui'
import { CbIcon as Icon } from '@ptpchips/carbon-ui'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="prepend append" style="width: 360px; margin-bottom: 20px">
    <template #prepend>Https://</template>
    <template #append>.com</template>
  </Input>

  <div>
    <Input v-model="test" placeholder="prefix suffix" style="width: 240px">
      <template #prefix>
        <Icon icon="fa-user" />
      </template>
      <template #suffix>
        <Icon icon="fa-user" />
      </template>
    </Input>
  </div>
</template>

Textarea

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

<script setup>
import { ref } from 'vue'
import { CbInput as Input } from '@ptpchips/carbon-ui'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="可以是一个 Textarea" type="textarea" style="width: 240px">
  </Input>
</template>

密码文本框

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

<script setup>
import { ref } from 'vue'
import { CbInput as Input } from '@ptpchips/carbon-ui'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="密码文本框，可以切换" showPassword style="width: 240px" />
</template>

清空文本框

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

<script setup>
import { ref } from 'vue'
import { CbInput as Input } from '@ptpchips/carbon-ui'
const test = ref('')
</script>
<template>
  <Input v-model="test" clearable placeholder="输入字符以后可以点击清空" style="width: 240px" />
</template>