antdv使用a-cascader联级选择器实现自定义浮层样式

一般的使用组件库想要自定义样式都会使用深度选择器deep去实现
但是有的组件不管是deep还是!important还是写行内样式都改不掉
这里主要讲使用a-cascader联级选择器的浮层改变样式

一,使用组件

<a-cascader:options="regionOptions"change-on-selectv-model="queryParams.regionCode"allowClearplaceholder="请选择"style="width: 160px":field-names="{label: 'title',value: 'id',children: 'children',}":display-render="displayRender"@change="changeVideoRegion"/>

这是组件自带的浮层样式,但我想使用的是灰色代替白底色,因为我有自带的背景色且不是白色

二,然后打开打印台找到控制样式的选择器

首先我的第一选择就是深度选择器,然后发现打印台根本没有自己写的样式,没生效
然后我就在深度选择器写的样式后面加了一个!important,一样没生效

然后我就在组件中行内写一个class="custom-cascader"然后再写样式,还是没生效

然后我就在api找看有没有属性是修改样式的,然后找到了可以自定义浮层的样式名称

然后直接在组件中写

<a-cascader:options="regionOptions"change-on-selectv-model="queryParams.regionCode"allowClearplaceholder="请选择"style="width: 160px":field-names="{label: 'title',value: 'id',children: 'children',}":display-render="displayRender"@change="changeVideoRegion"popupClassName="custom-cascader-popup"/>

然后我就在下面写样式,但是!!依旧没有生效,这就玄幻了,明明在打印台已经看到组件有这个类名了啊,后来一想应该是样式中加了scoped导致的,然后重新写了<style></style>标签,成功了!!!

后来发现浮层不是跟随选择器的发现了这个api属性,一起改了

还用深度选择器修改了选择框的样式

三,下面是完整的修改,顺便还改了滚动条的样式

组件部分

<a-cascader:options="regionOptions"change-on-selectv-model="queryParams.regionCode"allowClearplaceholder="请选择"style="width: 160px":field-names="{label: 'title',value: 'id',children: 'children',}":display-render="displayRender"@change="changeVideoRegion":getPopupContainer="(triggerNode) => triggerNode.parentNode"popupClassName="custom-cascader-popup"/>

样式部分

<style>
.custom-cascader-popup {background: #222222;color: rgba(255, 255, 255, 0.65);
}.custom-cascader-popup .ant-cascader-menu-item-expand-icon {color: rgba(255, 255, 255, 0.65);
}.custom-cascader-popup.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {color: #009fe8;background: transparent;
}.custom-cascader-popup .ant-cascader-menu-item:hover {background: transparent;
}.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar {/*滚动条整体样式*/width: 1px;
}.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar-thumb {/*滚动条里面小方块*/background: rgba(255, 255, 255, 0.4);
}.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar-track {/*滚动条里面轨道*/background: rgba(255, 255, 255, 0.15);
}
</style>
<style scoped lang="less">
.enlarge-and-video {position: fixed;left: 0;right: 0;bottom: 0;top: 0;z-index: 999;background-color: #000000;.enlarge-space {width: 100%;height: calc(~"100vh - 63px");:deep(.ant-form-item-label > label) {color: rgba(255, 255, 255, 0.85);}:deep(.ant-cascader-picker) {background-color: transparent;}:deep(.ant-cascader-input.ant-input) {border: 1px solid rgba(255, 255, 255, 0.2);}:deep(.ant-cascader-picker-arrow) {color: rgba(255, 255, 255, 0.25);}:deep(.ant-cascader-picker-clear) {color: rgba(256, 256, 256, 0.85);background: transparent;}:deep(.ant-cascader-picker-label) {color: rgba(255, 255, 255, 0.65);}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/134394.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

30道高频Vue面试题快问快答

面试中的快问快答 快问快答的情景在面试中非常常见。 在面试过程中&#xff0c;面试官通常会使用快问快答的方式来快速评估面试者的基础知识、思维能力和反应速度。 这种情景下&#xff0c;面试官会提出一系列简短的问题&#xff0c;并期望面试者能够迅速做出回答或提供简洁明…

云计算实战项目之---学之思在线考试系统

简介&#xff1a; 学之思开源考试系统是一款 java vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码结构清晰。支持web端和微信小程序&#xff0c;能覆盖到pc机和手机等设备。 支持多种部署方式&#xff1a;集成部署、前后端分离部署、docker部…

初识rust

调试下rust 的执行流程 参考&#xff1a; 认识 Cargo - Rust语言圣经(Rust Course) 新建一个hello world 程序&#xff1a; fn main() {println!("Hello, world!"); }用IDA 打开exe&#xff0c;并加载符号&#xff1a; 根据字符串找到主程序入口&#xff1a; 双击…

SpringCloud 微服务全栈体系(十二)

第十一章 分布式搜索引擎 elasticsearch 一、初识 elasticsearch 1. 了解 ES 1.1 elasticsearch 的作用 elasticsearch 是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; 在 GitHub 搜…

【安全】Java幂等性校验解决重复点击(6种实现方式)

目录 一、简介1.1 什么是幂等&#xff1f;1.2 为什么需要幂等性&#xff1f;1.3 接口超时&#xff0c;应该如何处理&#xff1f;1.4 幂等性对系统的影响 二、Restful API 接口的幂等性三、实现方式3.1 数据库层面&#xff0c;主键/唯一索引冲突3.2 数据库层面&#xff0c;乐观锁…

亚马逊云科技产品测评』活动征文|通过使用Amazon Neptune来预测电影类型初体验

文章目录 福利来袭Amazon Neptune什么是图数据库为什么要使用图数据库什么是Amazon NeptuneNeptune 的特点 快速入门环境搭建notebook 图神经网络快速构建加载数据配置端点Gremlin 查询清理 删除环境S3 存储桶删除 授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转…

chatgpt升级啦,训练数据时间更新到2023年4月,支持tools(升级functionCall),128k上下文

&#xff08;2023年11月7日&#xff09; gpt-4-1106-preview https://platform.openai.com/docs/models/gpt-4-and-gpt-4-turbo 训练数据日期升级到2023年四月 上线文增加到128k 调用一次chatgpt接口&#xff0c;可以得到多次函数调用 import OpenAI from "openai"…

水利部加快推进小型水库除险加固,大坝安全监测是重点

国务院常务会议明确到2025年前&#xff0c;完成新出现病险水库的除险加固&#xff0c;配套完善重点小型水库雨水情和安全监测设施&#xff0c;实现水库安全鉴定和除险加固常态化。 为加快推进小型水库除险加固前期工作&#xff0c;水利部协调财政部提前下达了2023年度中央补助…

网络流量分类概述

1. 什么是网络流量&#xff1f; 一条网络流量是指在一段特定的时间间隔之内&#xff0c;通过网络中某一个观测点的所有具有相同五元组(源IP地址、目的IP地址、传输层协议、源端口和目的端口)的分组的集合。 比如(10.134.113.77&#xff0c;47.98.43.47&#xff0c;TLSv1.2&…

YOLOv8-Pose推理详解及部署实现

目录 前言一、YOLOv8-Pose推理(Python)1. YOLOv8-Pose预测2. YOLOv8-Pose预处理3. YOLOv8-Pose后处理4. YOLOv8-Pose推理 二、YOLOv8-Pose推理(C)1. ONNX导出2. YOLOv8-Pose预处理3. YOLOv8-Pose后处理4. YOLOv8-Pose推理 三、YOLOv8-Pose部署1. 源码下载2. 环境配置2.1 配置CM…

web前端js基础------制作滚动图片

1&#xff0c;要求 通过定时器使其出现滚动的效果 可以通过按键控制图片滚动的方向&#xff08;设置两个按钮绑定点击事件&#xff09; 当鼠标悬停时图片停止&#xff0c;鼠标离开时图片继续向前滚动&#xff08;可以设置鼠标的悬停和离开事件&#xff09; 参考如下 conten…

揭开堆叠式自动编码器的强大功能

一、介绍 在不断发展的人工智能和机器学习领域&#xff0c;深度学习技术因其处理复杂和高维数据的能力而广受欢迎。在各种深度学习模型中&#xff0c;堆叠式自动编码器是一种多功能且功能强大的工具&#xff0c;可用于特征学习、降维和数据表示。本文探讨了堆叠式自动编码器在深…

【论文阅读】Generating Radiology Reports via Memory-driven Transformer (EMNLP 2020)

资料链接 论文原文&#xff1a;https://arxiv.org/pdf/2010.16056v2.pdf 代码链接&#xff08;含数据集&#xff09;&#xff1a;https://github.com/cuhksz-nlp/R2Gen/ 背景与动机 这篇文章的标题是“Generating Radiology Reports via Memory-driven Transformer”&#xf…

【JAVA】:万字长篇带你了解JAVA并发编程-死锁优化【六】

目录 【JAVA】&#xff1a;万字长篇带你了解JAVA并发编程-并发编程的优化【六】并发编程的优化避免死锁死锁产生的条件避免死锁的方式死锁例程代码使用JpsJstack查看进程死锁问题 避免资源竞争 个人主页: 【⭐️个人主页】 需要您的【&#x1f496; 点赞关注】支持 &#x1f4a…

C#,数值计算——偏微分方程,谱方法的微分矩阵的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 谱方法的微分矩阵 /// Differentiation matrix for spectral methods /// </summary> public class Weights { public Weights() { …

Spring Boot项目中通过 Jasypt 对属性文件中的账号密码进行加密

下面是在Spring Boot项目中对属性文件中的账号密码进行加密的完整步骤&#xff0c;以MySQL的用户名为root&#xff0c;密码为123321为例&#xff1a; 步骤1&#xff1a;引入Jasypt依赖 在项目的pom.xml文件中&#xff0c;添加Jasypt依赖&#xff1a; <dependency><…

Go语言开发环境安装,hello world!

1. Go开发包SDK https://golang.google.cn/dl/&#xff08;国内也可以安装&#xff09; 根据自己电脑下载对应的安装包&#xff0c;我懒下载了msi安装 然后一路点确定安装Go 2.安装GoLand https://www.jetbrains.com/go/download/#sectionwindows 下载安装包 一路确定安装完…

LoRaWAN物联网架构

与其他网关一样&#xff0c;LoRaWAN网关也需要在规定的工作频率上工作。在特定国家部署网关时&#xff0c;必须要遵循LoRa联盟的区域参数。不过&#xff0c;它是没有通用频率的&#xff0c;每个国家对使用非授权MHZ频段都有不同的法律规定。例如&#xff0c;中国的LoRaWAN频段是…

接口测试工具的实验,Postman、Swagger、knife4j(黑马头条)

一、Postman 最常用的接口测试软件&#xff0c;需要注意点&#xff1a;在进行post请求时&#xff0c;需要选择JSON形式发送 输入JSON字符串&#xff0c;比如&#xff1a; {"maxBehotTime": "2021-04-19 00:19:09","minBehotTime": "2021-…

微信小程序:怎么在一个js中修改另一个js的数据(这里通过缓存进行实现)

实例&#xff1a;现有两个页面index.js和category.js,我现在想在index.js中修改category.js的数据 初始数据 category [{name: 物流配送,list: [{id: 1,job: 外卖骑手,checked: true}, {id: 2,job: 快递员,checked: false}, {id: 3,job: 司机,checked: false}, {id: 4,job: …