el-form中设置input圆角
时间: 2023-06-09 12:08:48 浏览: 196
你可以在 el-form 中的 input 上设置 "border-radius" 属性来实现圆角。例如:
```
<el-form>
<el-form-item label="姓名">
<el-input v-model="name" prefix-icon="el-icon-user" placeholder="请输入姓名" :style="{borderRadius: '50px'}"></el-input>
</el-form-item>
</el-form>
```
这样就可以将 input 的圆角设置为 50px。你可以根据需要调整圆角大小。
相关问题
vue中el-form宽度设置
在Vue中使用`el-form`组件时,可以通过设置`label-width`和`content-width`属性来设置表单的宽度。
`label-width`属性用于设置表单项标签的宽度,可以取值为像素值或百分比。例如:
```html
<el-form label-width="80px">
<el-form-item label="用户名">
<el-input></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password"></el-input>
</el-form-item>
</el-form>
```
这样,表单项的标签宽度就被设置为了80像素。
`content-width`属性用于设置表单项内容区域的宽度,同样可以取值为像素值或百分比。例如:
```html
<el-form content-width="80%">
<el-form-item label="用户名">
<el-input></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password"></el-input>
</el-form-item>
</el-form>
```
这样,表单项的内容区域宽度就被设置为了父容器宽度的80%。
同时,还可以通过设置`inline`属性为`true`来将`el-form-item`的标签和内容排在同一行。例如:
```html
<el-form inline>
<el-form-item label="用户名">
<el-input></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password"></el-input>
</el-form-item>
</el-form>
```
这样,表单项就会以行内元素的形式排列。
表单 el-form 中el-input 链接校验
您可以使用 `el-form` 的 `rules` 属性来实现 `el-input` 的链接校验。具体步骤如下:
1. 在 `data` 中定义表单数据及校验规则:
```javascript
data() {
return {
form: {
link: '' // 表单数据
},
rules: {
link: [ // 校验规则
{ required: true, message: '请输入链接', trigger: 'blur' },
{ type: 'url', message: '请输入正确的链接', trigger: 'blur' }
]
}
}
}
```
2. 在 `el-form` 中绑定表单数据及校验规则:
```html
<el-form :model="form" :rules="rules">
<el-form-item label="链接" prop="link">
<el-input v-model="form.link"></el-input>
</el-form-item>
</el-form>
```
这样,当表单提交时,`el-form` 会自动根据校验规则校验 `el-input` 中的链接是否合法。如果校验不通过,会在页面上显示错误信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)