<el-form-item label="质检备注"> <el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;" ></el-input> </el-form-item> vue 和 element-ui实现补全修改代码,需求是代码原有基础上 将el-input最低高度为132px,出现框的样式和高度不匹配
时间: 2023-07-06 13:03:47 浏览: 178
你可以通过给 `el-input` 的外层包裹一个 `div` 元素,并设置该元素的高度为 132px,从而实现 `el-input` 的最低高度为 132px。代码示例如下:
```
<el-form-item label="质检备注">
<div style="height: 132px;">
<el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;"></el-input>
</div>
</el-form-item>
```
如果出现框的样式和高度不匹配,你可以通过修改 `el-input` 的样式来解决。比如,你可以添加如下的样式来设置 `el-input` 的出现框的最小高度为 132px:
```
.el-input__inner {
min-height: 132px;
}
```
将这段样式添加到你的 CSS 文件中或者在 `style` 标签中添加即可。
相关问题
<el-form-item label="维修记录:" prop="textarea"> <el-input v-model="ruleForm.textarea" placeholder="维修记录"/> </el-form-item>
这是一个基于 Element UI 的表单组件,用于输入维修记录。其中,`label` 属性表示表单项的标签文本,`prop` 属性表示该表单项与表单数据对象中的哪个属性绑定,`v-model` 指令则将表单项的值与 `ruleForm.textarea` 属性进行双向数据绑定。
在这个表单项中,使用了 `el-input` 组件来实现输入框,并设置了 `placeholder` 属性来提供输入提示。
<view style="padding-top:20rpx 10rpx 20rpx 10rpx"> <u--form labelPosition="left" labelAlig :model="model" ref="form" labelWidth="140rpx" :rules='rules'> <u-form-item label="特种车辆" prop="specialVehicle" ref="item1"> <u-switch v-model="model.specialVehicle" active-value="1" inactive-value="0"></u-switch> </u-form-item> <u-form-item label="车辆牌照" prop="vehicleCode" ref="item1"> <u--input v-model="model.vehicleCode" placeholder="请输入" size="small"></u--input> </u-form-item> <u-form-item label="客户名称" prop="customerName" ref="item1"> <u--input v-model="model.customerName" placeholder="请输入"></u--input> </u-form-item> <u-form-item label="送修人:" prop="senderRepairUserName" ref="item1"> <u--input v-model="model.senderRepairUserName" placeholder="请输入"></u--input> </u-form-item> <u-form-item label="联系电话" prop="customerCorporationPhone" ref="item1"> <u--input v-model="model.customerCorporationPhone" placeholder="请输入"></u--input> </u-form-item> <u-form-item label="报修地址" prop="repairAddress" ref="item1"> <!-- <u--address v-model="model.repairAddress" @select="" /> --> </u-form-item> <u-form-item label="故障描述" prop="faultDesc" ref="item1"> <u--textarea v-model="model.faultDesc" placeholder="请输入"></u--textarea> </u-form-item> </u--form> </view> uniapp 如何修改表单输入框高度,标签字体大小
要UniApp中表单输入框的高度和标签字体大小,你可以使用样式属性来实现。以下是示例代码:
```vue
<template>
<view style="padding-top: 20rpx 10rpx 20rpx 10rpx">
<u-form label-position="left" label-align :model="model" ref="form" label-width="140rpx" :rules="rules">
<u-form-item label="特种车辆" prop="specialVehicle" ref="item1">
<u-switch v-model="model.specialVehicle" active-value="1" inactive-value="0"></u-switch>
</u-form-item>
<u-form-item label="车辆牌照" prop="vehicleCode" ref="item1">
<u-input v-model="model.vehicleCode" placeholder="请输入" size="small"></u-input>
</u-form-item>
<u-form-item label="客户名称" prop="customerName" ref="item1">
<u-input v-model="model.customerName" placeholder="请输入"></u-input>
</u-form-item>
<u-form-item label="送修人:" prop="senderRepairUserName" ref="item1">
<u-input v-model="model.senderRepairUserName" placeholder="请输入"></u-input>
</u-form-item>
<u-form-item label="联系电话" prop="customerCorporationPhone" ref="item1">
<u-input v-model="model.customerCorporationPhone" placeholder="请输入"></u-input>
</u-form-item>
<u-form-item label="报修地址" prop="repairAddress" ref="item1">
<!-- <u-address v-model="model.repairAddress" @select="" /> -->
</u-form-item>
<u-form-item label="故障描述" prop="faultDesc" ref="item1">
<u-textarea v-model="model.faultDesc" placeholder="请输入"></u-textarea>
</u-form-item>
</u-form>
</view>
</template>
<style>
/* 修改输入框高度 */
.u-input {
height: 60rpx;
}
/* 修改标签字体大小 */
.u-form-item__label {
font-size: 28rpx;
}
</style>
```
在上述代码中,使用`.u-input`选择器来修改输入框的高度,可以根据需要调整 `height` 的数值。使用`.u-form-item__label`选择器来修改标签的字体大小,可以根据需要调整 `font-size` 的数值。
请注意,这只是一个示例代码,你需要根据你的实际情况进行相应的调整。