ant-desgin-vue 登录表单输入框前有图标
时间: 2023-12-22 22:02:58 浏览: 145
Ant Design Vue 的登录表单输入框前面可以添加图标,具体实现方法如下:
1. 在 `Input` 组件中使用 `prefix` 属性添加前缀图标,使用 `suffix` 属性添加后缀图标。
```html
<template>
<a-form>
<a-form-item>
<a-input prefix="user" placeholder="用户名"></a-input>
</a-form-item>
<a-form-item>
<a-input prefix="lock" type="password" placeholder="密码"></a-input>
</a-form-item>
</a-form>
</template>
```
2. 在 `Input` 组件中使用 `addon-before` 属性添加前置标签,使用 `addon-after` 属性添加后置标签。
```html
<template>
<a-form>
<a-form-item>
<a-input addon-before="http://" placeholder="网站"></a-input>
</a-form-item>
<a-form-item>
<a-input addon-after=".com" placeholder="域名"></a-input>
</a-form-item>
</a-form>
</template>
```
以上是两种常用的添加图标的方法,可以根据实际需求选择使用。
阅读全文