AntDesignmodal对话框内的标签样式⽆法修改
modal对话框中的样式⽆法使⽤deep⽅式修改,原因是modal挂载到了body上,⽽我们⼀般修改的样式都作⽤于 id=root 的div标签上。
1.第⼀种⽅法是使⽤内联样式,但是内联样式⽆法改变⼀些标签的⼀些属性,⽐如input-password的hight属性。
<a-modal
title="编辑地址"
:visible="visible"
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancel-text="取消"
ok-text="确定"
>
<!--地址-->
<a-spin
:spinning="spinAddress"
>
<div>
<div
style="display: flex;
align-items: center;
margin-bottom:20px;
position: relative;"
>
<span
>详细地址</span><a-textarea
v-model="newLocation"
placeholder="输⼊详细地址"
style="width:330px;
background: #FFFFFF;
border:1px solid #EAEAEA;
border-radius:3px;"
/>
</div>
</div>
</a-spin>
</a-modal>
2.第⼆种⽅法,在modal标签中加⼊:get-container=“false”
<a-modal
title="编辑地址"
:visible="visible"
:
confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancel-text="取消"
ok-text="确定"
:get-container="false"1.设置:get-container="false"属性>
<!--地址-->
<a-spin
:spinning="spinAddress"
>
<div>
<div class="qwe">
<span>详细地址</span>
<a-textarea
v-model="newLocation"
placeholder="输⼊详细地址"
/>
</div>
</div>
</a-spin>
</a-modal>
<style>
2.写样式
/deep/ textarea.ant-input {
input标签placeholder属性height:200px;
}
</style>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论