vue解决antd的cascader等弹出层样式修改失效的问题

官方api里面的popupStyle可以修改背景,颜色等,但是比如选项内容的hover,active样式就无法修改,即使使用/deep/穿透也不好使,原因是vue style中的scoped属性,无法修改动态加载的元素样式,但是如果去掉这个属性很可能会造成样式污染。

解决办法:

先设置popupClassName,再写一个不加scoped的style

<a-cascader
          v-model="adCode"
          :options="adTreeData"
          changeOnSelect
          placeholder="请选择行政区划"
          @change="onChange"
          :popupClassName="'cascader'"
          :fieldNames="{ label: 'name', value: 'code', children: 'list' }"
        />
<style>
.cascader {
  background: rgba(0, 0, 0, 0.65) ;
}
.cascader .ant-cascader-menu,
.cascader .ant-cascader-menu-item-expand-icon {
  color: #fff ;
}
.cascader .ant-cascader-menu-item:hover,
.cascader .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
.cascader .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
  color: #000;
}
</style>

修改后如图

在这里插入图片描述

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中创建 Popup 弹出层的一种常见方法是使用组件和动态绑定。以下是一个简单的示例: 首先,创建一个名为 `Popup` 的 Vue 组件,该组件将用于显示弹出层内容。可以在组件中使用 `v-if` 或 `v-show` 来控制弹出层的显示与隐藏。 ```vue <template> <div class="popup" v-show="showPopup"> <!-- 弹出层内容 --> <div class="popup-content"> <!-- 内容 --> </div> </div> </template> <script> export default { data() { return { showPopup: false // 控制弹出层显示与隐藏的标志位 }; } }; </script> <style scoped> .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); // 半透明遮罩层 } .popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; } </style> ``` 然后,在需要触发弹出层的地方,使用一个按钮或其他交互元素并绑定一个点击事件。在事件处理程序中,通过修改 `showPopup` 数据属性来控制弹出层的显示与隐藏。 ```vue <template> <div> <button @click="showPopup = !showPopup">显示弹出层</button> <Popup :showPopup="showPopup" /> <!-- 在需要显示弹出层的地方添加组件 --> </div> </template> <script> import Popup from './Popup.vue'; export default { components: { Popup }, data() { return { showPopup: false // 控制弹出层显示与隐藏的标志位 }; } }; </script> ``` 这样,当按钮被点击时,`showPopup` 的值将被切换,从而控制弹出层的显示与隐藏。可以根据需要对弹出层样式和行为进行进一步的自定义。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值