Naive UI去掉n-select下拉框边框,去掉n-input输入框边框

在这里插入图片描述

1、第一种通过js去掉

<template><div><div style="margin-top:10px;width: 100%;"><dade-descriptions><tr><dade-descriptions-item label="代理名称"><dade-input placeholder="代理名称"></dade-input></dade-descriptions-item><dade-descriptions-item label="代理级别"><n-select class="dade-select" :options="options" /></dade-descriptions-item><dade-descriptions-item label="手机号"><n-input type="text" placeholder="基本的 Input" /></dade-descriptions-item><dade-descriptions-item label="状态"><div style="padding: 4px 8px;">22</div></dade-descriptions-item></tr><tr><dade-descriptions-item label="开始时间">22</dade-descriptions-item><dade-descriptions-item label="结束时间" colspan="5">33</dade-descriptions-item></tr><tr><dade-descriptions-item label="大得001" colspan="7"><n-input type="text" placeholder="基本的 Input" /></dade-descriptions-item></tr></dade-descriptions></div></div>
</template><script setup>import { ref,onMounted } from 'vue';// 初始化好后执行onMounted(() => {// 获取元素集合,去掉n-select下拉框的边框const myDivs = document.getElementsByClassName('n-base-selection');// 检查是否有匹配的元素if (myDivs.length > 0) {for(let i=0;i<=myDivs.length - 1;i++){// 访问第一个匹配的元素const myDiv = myDivs[i];// 移除 --n-border 样式myDiv.style.removeProperty('--n-border');}}// 去掉n-input边框const myDivs2 = document.getElementsByClassName('n-input');if (myDivs2.length > 0) {for(let i=0;i<=myDivs2.length - 1;i++){// 访问第一个匹配的元素const myDiv = myDivs2[i];// 移除 --n-border 样式myDiv.style.removeProperty('--n-border');}}});let options = ref([{label: "Drive My Car",value: "song1"},{label: "Norwegian Wood",value: "song2"}])</script><style scoped></style>

descriptions组件文章
https://blog.csdn.net/qq_34631220/article/details/145491806

2、推荐,通过css去掉
全局或者在当前vue写上这个css

/* 去掉naive边框 */
.dade-border-node .n-base-selection {--n-border: none !important;
}
.dade-border-node .n-input {--n-border: none !important;
}

在类上加dade-border-node,那一块需要去边框,就在那一块加上类dade-border-node

在这里插入图片描述

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

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

相关文章

Qwen2-VL-2B-Instruct 模型 RK3576 板端部署过程

需要先在电脑上运行 RKLLM-Toolkit 工具&#xff0c;将训练好的模型转换为 RKLLM 格式的模型&#xff0c;然后使用 RKLLM C API 在开发板上进行推理。 在安装前先查看板端的内存容量&#xff0c;和自己模型占用大小比较一下&#xff0c;别安装编译好了不能用。 这里我就是先尝试…

【C语言标准库函数】双曲函数:sinh(), cosh(), tanh()

目录 一、头文件 二、函数简介 2.1. 双曲正弦函数 sinh(double x) 2.2. 双曲余弦函数 cosh(double x) 2.3. 双曲正切函数 tanh(double x) 三、函数实现&#xff08;概念性&#xff09; 四、注意事项 4.1. 参数类型 4.2. 计算精度 4.3. 函数返回值 4.4. 环境差异 4.…

(五)QT——QDialog 对话框

目录 前言 QDialog 主要功能 QDialog 使用方法 基本QDialog 应用程序级别的模态对话框 标准对话框 示例代码 功能展示 总结 1. 基本功能 2. 创建方式 3. 常用方法 前言 QDialog 是 Qt 框架中的对话框类&#xff0c;用于创建模态&#xff08;modal&#xff09;或非…

python 语音识别方案对比

目录 一、语音识别 二、代码实践 2.1 使用vosk三方库 2.2 使用SpeechRecognition 2.3 使用Whisper 一、语音识别 今天识别了别人做的这个app,觉得虽然是个日记app 但是用来学英语也挺好的,能进行语音识别,然后矫正语法,自己说的时候 ,实在不知道怎么说可以先乱说,然…

TensorFlow域对抗训练DANN神经网络分析MNIST与Blobs数据集梯度反转层提升目标域适应能力可视化...

全文链接&#xff1a;https://tecdat.cn/?p39656 本文围绕基于TensorFlow实现的神经网络对抗训练域适应方法展开研究。详细介绍了梯度反转层的原理与实现&#xff0c;通过MNIST和Blobs等数据集进行实验&#xff0c;对比了不同训练方式&#xff08;仅源域训练、域对抗训练等&am…

OSPF基础(2):数据包详解

OSPF数据包(可抓包) OSPF报文直接封装在IP报文中&#xff0c;协议号89 头部数据包内容&#xff1a; 版本(Version):对于OSPFv2&#xff0c;该字段值恒为2(使用在IPV4中)&#xff1b;对于OSPFv3&#xff0c;该字段值恒为3(使用在IPV6中)。类型(Message Type):该OSPF报文的类型。…

在CT107D单片机综合训练平台上,8个数码管分别单独依次显示0~9的值,然后所有数码管一起同时显示0~F的值,如此往复。

题目&#xff1a;在CT107D单片机综合训练平台上&#xff0c;8个数码管分别单独依次显示0~9的值&#xff0c;然后所有数码管一起同时显示0~F的值&#xff0c;如此往复。 延时函数分析LED首先实现8个数码管单独依次显示0~9的数字所有数码管一起同时显示0~F的值&#xff0c;如此往…

使用VCS对Verilog/System Verilog进行单步调试的步骤

Verilog单步调试&#xff1a; System Verilog进行单步调试的步骤如下&#xff1a; 1. 编译设计 使用-debug_all或-debug_pp选项编译设计&#xff0c;生成调试信息。 我的4个文件&#xff1a; 1.led.v module led(input clk,input rst_n,output reg led );reg [7:0] cnt;alwa…

数据结构及排序算法

数据结构 线性结构 ◆线性结构:每个元素最多只有一个出度和一个入度,表现为一条线状。线性表按存储方式分为顺序表和链表。 存储结构: ◆顺序存储:用一组地址连续的存储单元依次存储线性表中的数据元素,使得逻辑上相邻的元素物理上也相邻。 ◆链式存储:存储各数据元素的结点…

python实现多路视频,多窗口播放功能

系列Python开发 文章目录 系列Python开发前言一、python实现多路视频播放功能二、代码实现1. http申请视频流地址并cv2播放功能 三、打包代码实现生成可执行文件 总结 前言 一、python实现多路视频播放功能 服务端开发后通常需要做功能测试、性能测试&#xff0c;通常postman、…

【R语言】数据操作

一、查看和编辑数据 1、查看数据 直接打印到控制台 x <- data.frame(a1:20, b21:30) x View()函数 此函数可以将数据以电子表格的形式进行展示。 用reshape2包中的tips进行举例&#xff1a; library("reshape2") View(tips) head()函数 查看前几行数据&…

51单片机之使用Keil uVision5创建工程以及使用stc-isp进行程序烧录步骤

一、Keil uVision5创建工程步骤 1.点击项目&#xff0c;新建 2.新建目录 3.选择目标机器&#xff0c;直接搜索at89c52选择&#xff0c;然后点击OK 4.是否添加起吊文件&#xff0c;一般选择否 5.再新建的项目工程中添加文件 6.选择C文件 7.在C文件中右键&#xff0c;添加…

STM32 软件SPI读写W25Q64

接线图 功能函数 //写SS函数 void My_W_SS(uint8_t BitValue) {GPIO_WriteBit(GPIOA, GPIO_Pin_4, (BitAction)BitValue); }//写SCK函数 void My_W_SCK(uint8_t BitValue) {GPIO_WriteBit(GPIOA, GPIO_Pin_5, (BitAction)BitValue); }//写MOSI函数 void My_W_MOSI(uint8_t Bit…

apachePoi中XSSFClientAnchor图片坐标简述;填充多张图片

概述 业务中经常会遇到在单元格内填充图片的需求&#xff0c;而且要求指定图片在单元格内的位置。 一般都是用的apache的poi&#xff0c;设置图片坐标。 HSSFClientAnchor(int dx1, int dy1, int dx2, int dy2, short col1, int row1, short col2, int row2)dx1 dy1 起始单元…

Centos挂载镜像制作本地yum源,并补装图形界面

内网环境centos7.9安装图形页面内网环境制作本地yum源 上传镜像到服务器目录 创建目录并挂载镜像 #创建目录 cd /mnt/ mkdir iso#挂载 mount -o loop ./CentOS-7-x86_64-DVD-2009.iso ./iso #前面镜像所在目录&#xff0c;后面所挂载得目录#检查 [rootlocalhost mnt]# df -h…

ssti学习笔记(服务器端模板注入)

目录 一&#xff0c;ssti是什么 二&#xff0c;原理 所谓模板引擎&#xff08;三列&#xff0c;可滑动查看&#xff09; 三&#xff0c;漏洞复现 1&#xff0c;如何判断其所属的模板引擎&#xff1f; 2&#xff0c;判断清楚后开始注入 &#xff08;1&#xff09;Jinja2&a…

【前端】Python 闭包与JavaScript闭包的实现差异

目录 Python 闭包JavaScript 闭包 推荐超级课程&#xff1a; Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战 Python 闭包 如何定义&#xff1a; 在一个函数内部定义另一个函数&#xff0c;内部函数引用外部函数的变量。 def outer_function(text):…

【JVM详解二】常量池

一、常量池概述 JVM的常量池主要有以下几种&#xff1a; class文件常量池运行时常量池字符串常量池基本类型包装类常量池 它们相互之间关系大致如下图所示&#xff1a; 每个 class 的字节码文件中都有一个常量池&#xff0c;里面是编译后即知的该 class 会用到的字面量与符号引…

人工智能入门 数学基础 线性代数 笔记

必备的数学知识是理解人工智能不可或缺的要素&#xff0c;今天的种种人工智能技术归根到底都建立在数学模型之上&#xff0c;而这些数学模型又都离不开线性代数&#xff08;linear algebra&#xff09;的理论框架。 线性代数的核心意义&#xff1a;世间万事万物都可以被抽象成某…

C# Winform怎么设计串口,客户端和相机控件界面显示

首先我们必须把这个类创建好 INIAPI using System; using System.Text; using System.Runtime.InteropServices;namespace Ini {public class IniAPI{#region INI文件操作/** 针对INI文件的API操作方法&#xff0c;其中的节点&#xff08;Section)、键&#xff08;KEY&#x…