antd vue a-model 在组件内修改样式无效的原因

最新推荐文章于 2024-07-12 11:16:07 发布
最新推荐文章于 2024-07-12 11:16:07 发布
阅读量1.1k 收藏 4
点赞数 2
分类专栏： vue3 antd vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44603011/article/details/131061054
版权

a-model组件默认是挂载在body中的

所以当我们在应用这个组件的页面中 修改它的样式是无效的。

针对无法修改样式的情况可以：将a-model的挂载点设置到这个组件的页面。

 

这样就可以在使用到这个组件的页面 进行修改样式了  

逆风优雅
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
Yukinoshita_kino的博客
11-15 8937
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
Ant Design modal对话框内的标签样式无法修改
stm870581942的博客
06-16 1857
modal对话框中的样式无法使用deep方式修改，原因是modal挂载到了body上，而我们一般修改的样式都作用于 id=root 的div标签上。 1.第一种方法是使用内联样式，但是内联样式无法改变一些标签的一些属性，比如input-password的hight属性。 <a-modal title="编辑地址" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCa
vue实现a-model弹窗拖拽移动
最新发布
学敲代码的Stars的博客
07-12 699
新建一个ts / js文件，用ts举例// 自定义指令使弹窗可拖动// 获取弹窗的属性if (!// 存储上一次拖拽完成时的偏移数据// 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置if (!// top 初始值为 offsetTop// 因为 modal 初始就有垂直偏移，水平方向没有（是用 margin 保证 modal 在中间的）// 记录实时偏移量，数字格式// 实时改变modal偏移。
antd vue modal弹窗修改样式不生效
ajaxsync
08-29 1378
为此，官网文档提供了一个API。，用来挂载弹窗的渲染节点。
ant-desgin for vue. Modal组件修改样式无效问题
qq_44806249的博客
08-13 1553
ant-desgin-vue modal 组件修改样式无效
Ant design vue Popover组件样式设置无效
张木期的博客
09-10 5876
审查元素的时候在.ant-popover-title里加上background-color:red;是有效的，但是我自己写代码的时候，这样写 /deep/.ant-popover-title{ background-color:red; } 无效，折腾了半天，死活不起作用，最后查资料是把<style lang="less" scoped>里的scoped去掉， 然后再把/deep/去掉就可以了 这样做影响了其他界面，但好歹对我这个项目没啥影响，可以这样用。 查了更详细的资料后，发现popo..
关于在vue中在style上加了scoped之后对antd-vue中各组件的样式不起作用的解决方法
zn_firm的博客
07-19 367
使用less/sass的情况下，因为解析不了。这种特殊符号，可以使用/deep/使用css的情况下可以加。特殊符号，表示深层选择器。
antd-mobile-vue:antd-mobile的vue实现
05-17
如有问题可添加个人微信（wuhao1200），欢迎共同交流该项目原本为公司内部项目，现放到github上开源，发布个时候项目名称改为antd-mobile-vueantd-mobile-vue基于 Vue 的组件库，代码由antd-mobile转为Vue版本，目前...
antd-mobile-vue3.0:适用于vue 3.0的ant mobile
04-06
本项目是在本人之前移植的antd-mobile-vue的基础上使用vue3+vite2进行了改造，目前绝大部分组件都可以正常使用如有问题可添加个人微信（wuhao1200），欢迎共同交流antd-mobile-vue基于 Vue3 的组件库，代码由antd-...
vue-antd-mobile
05-13
vue-antd-mobileAnt Design mobile of Vue实现基于组件库样式使用Install 安装正在开发中...This module is still working in progress right now, so it is just for placeholder.Usage 使用Develop 开发build 打包...
vue-antd-admin:基于vue3 + antd + JavaScript的后台系统
03-11
vue-antd-admin欢迎使用vue-antd-admin，这是一个基于vue3.0 + antd2.0.0 + vuex4.0 + vue-router4.0的适合新手学习的项目，后台全部采用了composition API的写法，作者也只是个刚出学校的初级菜鸟前端，在vue3的...
antd-img-crop:Ant用于Ant Design上传的图像裁剪器
04-28
antd-img-crop 用于Ant设计的图像裁剪器。 English |演示版安装yarn add antd-img-crop用法import ImgCrop from 'antd-img-crop' ;import { Upload } from 'antd' ;const Demo = ( ) => ( < ImgCrop> < Upload> + ...
解决ant-design-vue的Modal组件 设置全屏不生效，css样式无法更改
csdn_bk的博客
07-08 414
问题描述：在使用 ant-design-vue 的 Modal 组件，按照官网设置全屏样式不生效，ant-modal样式top值无法覆盖，导致上面空余了一部分。
解决ant design vue中的modal弹框样式修改无效问题 修改modal样式无效
weixin_45958605的博客
04-11 4707
1、ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的 原因在于弹框modal被挂载在最大的元素div外面了 所以需要将挂载在某个html元素上 在modal外面主动套一个div 在修改样式即可 2、:getContainer="()=>$refs.ref" ...
Ant Design Modal模态框添加类名后样式不生效
Smallwhitestrive的博客
08-18 1541
其实是包裹的问题，原因就是模态框他被渲染在外部了，并没有渲染在包裹模态框的组件里，所以渲染不出我们想要的效果。在使用Ant Design的模态框的时候，添加类名后，对其样式一顿操作，一保存在页面一看，煮熟的样式飞了🤔。然后跑到页面一看，啥样式都没生效啊，然后就开始怀疑人生 . . . . . .怀疑自己里面的样式或者类名没写对，怀疑样式写错了 . . . . . .而我们只需要将模态框的样式放在和组件平级的层级就可以了。怀疑类名没加上 . . . . .这样就可以解决样式不生效的问题啦😁。...
Modal.method() 不显示头部的问题
正一品程序员的博客
05-23 402
Modal.method() 不显示头部的问题。
vue3 - Ant Desgin Vue 组件库中修改对话框 a-modal 头部样式，ant框架中修改模态框modal头部样式（提供详细代码，完美解决使用/deep/或者v-deep无效的问题）
高级前端工程师
11-07 3445
vue3，ant design vue，deep无效怎么办，样式穿透无效如何解决，vue3+ant design vue3项目修改对话框组件a-modal的头部样式，vue3如何修改ant design vue组件库的弹框组件modal头部样式，覆盖ant design vue弹框头部headers样式，vue3.0更改modal的样式，vue3 a-modal对话框样式修改不生效怎么办，vue3项目antd vue modal弹窗修改样式不生效，vue3项目样式穿透修改ant的对话模态框无效，vue3 a
解决react + Ant design 中的modal样式问题
梦魇邪笑的博客
03-22 3521
解决react + Ant design 中的modal样式问题
vue3+antdv的Modal的样式设置
我的愿望太多了
12-22 812
在Modal外层套div并设置div的ref='mod'，Modal设置 :get-container="() => $refs.mod" 和 :bodyStyle="bodyStyle" ，样式就生效了，若还未生效，重启项目即可。
antd vue a-tabs组件下的组件接口重复请求多次问题
06-03
在antd vue a-tabs组件下的组件接口重复请求多次的问题，可能是由于组件在激活时会重复请求接口导致的。为了解决这个问题，你可以通过以下两种方式来解决： 1.使用keep-alive组件缓存请求结果 将需要缓存的组件用`<keep-alive>`标签包裹起来，这样组件在激活时就会从缓存中取数据，而不是重新请求接口。示例代码如下： ``` <keep-alive> <a-tab-pane :key="tab.key" v-for="tab in tabs" :tab="tab"> <my-component :tab="tab"></my-component> </a-tab-pane> </keep-alive> ``` 2.使用标志位控制请求次数 在组件中定义一个标志位，用来判断是否已经请求过接口。如果已经请求过，则不再重复请求。示例代码如下： ``` <template> <div> <a-button @click="getData">获取数据</a-button> </div> </template> <script> export default { data() { return { loading: false, hasFetched: false, // 标志位 data: null } }, methods: { async getData() { if (this.loading) return if (this.hasFetched) return // 如果已经请求过，则不再重复请求 this.loading = true try { const res = await fetch('/api/data') this.data = await res.json() this.hasFetched = true // 标志位设为已请求 } catch (error) { console.error(error) } finally { this.loading = false } } } } </script> ``` 以上是两种解决方法，你可以根据实际情况选择其中一种来解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值