32 lines
957 B
Vue
32 lines
957 B
Vue
<script setup lang="ts">
|
||
</script>
|
||
|
||
<template>
|
||
<div style="display: flex; gap: 12px; flex-wrap: wrap; width: 300px;">
|
||
<!-- small 输入框，使用 slot 图标 -->
|
||
<AInput size="small" placeholder="Small 输入框">
|
||
<template #prefix>
|
||
<AIcon icon="material-symbols:10k-outline" />
|
||
</template>
|
||
<template #suffix>
|
||
<AIcon icon="material-symbols:10k-outline" />
|
||
</template>
|
||
</AInput>
|
||
|
||
<!-- medium 输入框，使用 prop 图标 -->
|
||
<AInput
|
||
size="medium"
|
||
placeholder="Medium 输入框"
|
||
prefix-icon="material-symbols:10k-outline"
|
||
suffix-icon="material-symbols:10k-outline"
|
||
/>
|
||
|
||
<!-- large 输入框，prefix 用 slot，suffix 用 prop -->
|
||
<AInput size="large" placeholder="Large 输入框" suffix-icon="material-symbols:10k-outline">
|
||
<template #prefix>
|
||
<AIcon icon="material-symbols:10k-outline" />
|
||
</template>
|
||
</AInput>
|
||
</div>
|
||
</template>
|