antDesign 文本域弹窗样式
<a-modal
v-model:visible="reportVisible"
title="操作确认"
:footer="null"
:destroyOnClose="true"
:maskClosable="false"
width="40%"
:afterClose="afterClose"
class="rejectModal"
>
<a-form
ref="ruleForms"
:model="submitForm"
:rules="rules"
:label="{ span: 24, offset: 24 }"
layout="horizontal"
class="textareaDialog"
>
<a-row :gutter="24">
<a-col :span="24">
<a-form-item ref="content" label="意见:" name="content">
<a-textarea
v-model:value="submitForm.content"
placeholder="请输入意见"
allowClear
:maxlength="255"
:rows="4"
showCount
:autosize="{ minRows: 4, maxRows: 6 }"
/>
</a-form-item>
</a-col>
</a-row>
<div class="footButton">
<a-button type="primary" @click="onSubmit">确定</a-button>
<a-button
type="primary"
@click="afterClose"
style="margin-left: 20px"
>取消</a-button
>
</div>
</a-form>
</a-modal>
CSS:
<style>
/* 文本域的样式 */
.textareaDialog .ant-form-item-label {
width: 20%!important;
}
.textareaDialog .ant-form-item-control-wrapper {
width: 60%!important;
}
/* 右下角的字调整位置 */
.textareaDialog .ant-input-textarea-show-count {
position: relative;
}
.textareaDialog .ant-input-textarea-show-count::after {
position: absolute;
right: 30px;
bottom: -10px;
}
.textareaDialog .ant-input-affix-wrapper{
padding:16px
}
</style>