Input 输入框

通过折叠面板收纳内容区域

基础用法

Details

<template>
  <a-input v-model="input" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

禁用状态

每次只能展开一个面板

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

Details

<template>
  <a-input v-model="input" disabled placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

一键清空

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

Details

<template>
  <a-input v-model="input" placeholder="Please input" clearable />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

密码框

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

Details

<template>
  <a-input
    v-model="input"
    type="password"
    placeholder="Please input password"
    show-password
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>