Input 输入框 #

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

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

<template>
  <vi-input v-model="value" placeholder="基础 Input" />
</template>

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

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

<template>
  <vi-input v-model="value" placeholder="禁用 Input" disabled />
</template>

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

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

<template>
  <vi-input v-model="value" placeholder="禁用 Input" clearable />
</template>

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

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

<template>
  <vi-input v-model="value" type="password" placeholder="显示密码" show-pwd />
</template>

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

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-input v-model="value1" placeholder="限制输入 10 个字符" limit="10" />
    <vi-input v-model="value2" placeholder="显示限制输入" limit="10" show-limit />
    <vi-input v-model="value3" placeholder="自定义分隔符" limit="10" show-limit limit-separator=" - " />
  </vi-flex>
</template>

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

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-input v-model="value1" type="textarea" placeholder="文本域" />
    <vi-input v-model="value2" type="textarea" placeholder="文本域（自定义高度）" rows="5" />
    <vi-input v-model="value3" type="textarea" placeholder="文本域（限制输入）" limit="30" show-limit />
  </vi-flex>
</template>

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

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-input 
      v-model="value1" 
      placeholder="自定义前后 icon" 
      prefix-icon="Search" 
      suffix-icon="Menu" 
    />
    <vi-input 
      v-model="value2" placeholder="自定义前后 icon（对象式）" 
      :prefix-icon="{ name: 'Apple', size: '16px', hoverColor: 'var(--vi-color-primary)' }" 
      :suffix-icon="{ name: 'Windows', size: '16px', hoverColor: 'var(--vi-color-primary)' }"  
    />
    <vi-input v-model="value3" placeholder="自定义前后 icon (插槽式)">
      <template #prefix>
        <vi-icon name="Plus" size="16px" color="var(--vi-color-primary)" />
      </template>
      <template #suffix>suffix but not Icon</template>
    </vi-input>
  </vi-flex>
</template>

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

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

<template>
  <vi-input v-model="value" placeholder="添加前置与后置内容" clearable>
    <template #prepend>http://</template>
    <template #append>.com</template>
  </vi-input>
</template>