当前位置: 首页 > news >正文

Naive UI 选择器 Select 的:render-option怎么使用(Vue3 + TS)(鼠标悬停该条数据的时候展示全部内容)

项目场景:

在渲染select选择器后,当文字过长的时候,多出来的部分会显示成省略号,这使我们不能很清晰的看到该条数据的完整信息,就需要加一个鼠标悬停展示完整内容。


解决方案:

vue代码:

 <n-select clearable filterable v-model:value="value" :render-option="renderOption"  :options="options" label-field="label" value-field="value" placeholder="请选择"></n-select>

js:

const value= ref<string>('01')
const options= ref<any[]>( [{label: 'Everybody\'s Got Something to Hide Except Me and My Monkey',value: 'song0',disabled: true},{label: 'Drive My Car',value: 'song1'},])接下来展示render-option的方法如何使用
import type { SelectOption } from 'naive-ui';
import { NTooltip } from 'naive-ui';//定义了renderOption的函数,它接受两个参数:node和option。
//node是一个虚拟节点
//option是一个SelectOption类型的对象
const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
//调用了h函数,这是Vue.js中用于创建虚拟节点的函数。
//h函数的第一个参数是NTooltip,这是一个组件,它是一个自定义的Vue组件,用于显示提示信息。
//第二个参数null表示没有额外的属性需要传递给NTooltip组件。
//第三个参数是一个对象,它定义了NTooltip组件的插槽内容。h(NTooltip, null, {
//trigger属性是一个函数,它返回node。这个函数的作用是定义触发NTooltip显示的事件。在这个例子中,当用户与node交互(例如鼠标悬停)时,NTooltip组件将被触发显示。trigger: () => node,//default属性也是一个函数,它返回另一个调用h函数的结果。这次h函数创建了一个span标签的虚拟节点。//span标签的style属性设置了一个对象,该对象包含一个color属性,其值为#00acbb,这是文本的颜色。//option.name as string是span标签的文本内容,这里使用了类型断言as string来确保option.name被当作字符串处理。default: () => {return h('span', {style: {color: "#00acbb",}}, option.name as string)},})

总结起来,这段代码定义了一个函数renderOption,它创建了一个NTooltip组件的虚拟节点,当用户与传入的node交互时,会显示一个提示框,提示框中包含一个span标签,显示option.name的文本内容,并且文本颜色为#00acbb。

相关文章:

Naive UI 选择器 Select 的:render-option怎么使用(Vue3 + TS)(鼠标悬停该条数据的时候展示全部内容)

项目场景&#xff1a; 在渲染select选择器后&#xff0c;当文字过长的时候&#xff0c;多出来的部分会显示成省略号&#xff0c;这使我们不能很清晰的看到该条数据的完整信息&#xff0c;就需要加一个鼠标悬停展示完整内容。 解决方案&#xff1a; vue代码&#xff1a; <n…...

使用Mac如何才能提高OCR与翻译的效率

OCR与截图大家都不陌生&#xff0c;或许有的朋友对于这两项功能用到的不多&#xff0c;但是如果经常会用到的话&#xff0c;那你就该看看了 iOCR&#xff0c;快捷键唤出翻译窗口&#xff0c;不论是截图翻译、划词翻译、输入翻译、剪切板翻译&#xff0c;统统快捷键完成&#x…...

QML----复制指定下标的ListModel数据

我现在有一个写好的listmodel,我需要从里边抽取35个数据作为展示 头文件 #ifndef GETONEPAGESIZEMEMBERLISTMODEL_H #define GETONEPAGESIZEMEMBERLISTMODEL_H#include <QObject> #include <QAbstractListModel> #include <QDebug> #include "mylistm…...

CSS Text(文本)

CSS Text(文本) CSS Text 是一种用于控制网页中文本显示样式的技术。通过使用 CSS Text 属性,开发者可以轻松地调整文本的字体、大小、颜色、对齐方式等,从而实现更加美观和个性化的网页设计。本文将详细介绍 CSS Text 的各种属性及其应用方法。 一、字体属性 1. font-fam…...

聊一聊Spring中的@Transactional注解【下】【注解失效场景】

前言 尽管 Transactional 注解在 Spring 中提供了方便的事务管理功能&#xff0c;我们在使用过程中却常常面临其失效的问题。事务失效可能导致意想不到的数据状态和错误&#xff0c;影响应用的稳定性和可靠性。本文将探讨一些常见的 Transactional 失效场景&#xff0c;包括异常…...

对称加密与非堆成加密

http通信有一些什么问题 窃听 - 对称加密传递密钥 - 非对称加密安全速度 - 非对称加密 对称加密中间人攻击 - 证书证书伪造 - 消息摘要摘要伪造 - 数字签名 可能被窃听 http本身不具备加密功能&#xff0c;http报文使用明文方式发送 还可能存在验证问题 无法确认发送到的…...

江协科技STM32学习- P28 USART串口数据包

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…...

Linux脚本循环(for、while、until)

文章目录 for基础风格for列表风格for与seq组合for与大括号for循环处理脚本参数组合命令while基础while数字累加utilcontinue for基础风格 这种风格最像高级程序中的for循环 #!/bin/bashfor(( i0; i<10; i )) doecho "第$i次for循环" donefor列表风格 #!/bin/ba…...

文件系统上云的挑战

优质博文&#xff1a;IT-BLOG-CN 一、挑战/注意事项 【1】因文件系统HDFS没有关联信息OrderId等&#xff0c;不能对存量数据进行有策略的同步&#xff0c;因此目前是将所有的文件同步至云服务器SIN&#xff1b; 【2】海外数据和国内数据上传到各自的文件服务器后&#xff0c;…...

【北京迅为】《STM32MP157开发板嵌入式开发指南》-第七十一章 制作Ubuntu文件系统

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…...

中间件漏洞总结

参考&#xff1a;Tomcat漏洞详解-CSDN博客 tomcat 历史漏洞 阿里云漏洞库 (aliyun.com) 弱口令和war远程部署漏洞 弱口令 Tomcat8.* 登录页面&#xff1a;/manager/html 弱口令&#xff1a;tomcat/tomcat 后台Getshell 登录到后台后可以通过部署 war 包进行 getshell wa…...

PySpark Yarn集群模式

目录 简介 一、PySpark简介 二、YARN模式概述 三、配置环境 1. 安装与配置Spark 2. 配置Hadoop和YARN 3. 启动yarn 四、编写PySpark脚本 五、提交PySpark作业到YARN 参数解释&#xff1a; 六、常见问题及解决 七、总结 简介 随着大数据的普及&#xff0c;Spark作为…...

Matlab基于经纬度点并行提取指定日期的tiff栅格位置的值

文章目录 前言一、基本说明二、代码 前言 该 MATLAB 代码用于从 GeoTIFF 文件中提取基于特定地理位置&#xff08;经纬度&#xff09;和日期的某个点的相关数据。代码首先读取一个包含事件数据&#xff08;日期、经纬度&#xff09;的 Excel 文件&#xff0c;然后根据日期和位…...

npm入门教程19:npm包管理

一、代码更新 遵循语义化版本控制&#xff1a; 在更新包时&#xff0c;应遵循语义化版本控制&#xff08;Semantic Versioning&#xff0c;简称SemVer&#xff09;规范。这意味着版本号的变更应反映代码变更的程度&#xff0c;通常遵循主版本号.次版本号.修订号的格式。主版本号…...

【NOIP提高组】虫食算

【NOIP提高组】虫食算 C语言C &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 所谓虫食算&#xff0c;就是原先的算式中有一部分被虫子啃掉了&#xff0c;需要我们根据剩下的数字来判定被啃掉的字母。来看一个简单的例子&#xff1a; 43#98…...

软件测试面试题个人总结

前面看到了一些面试题&#xff0c;总感觉会用得到&#xff0c;但是看一遍又记不住&#xff0c;所以我把面试题都整合在一起&#xff0c;都是来自各路大佬的分享&#xff0c;为了方便以后自己需要的时候刷一刷&#xff0c;不用再到处找题&#xff0c;今天把自己整理的这些面试题…...

HTML 语法规范——代码注释、缩进与格式、标签与属性、字符编码等

文章目录 一、代码注释1.1 使用注释的主要目的1.2 使用建议二、标签的使用2.1 开始标签和结束标签2.2 自闭合标签2.3 标签的嵌套2.4 标签的有效性三、属性四、缩进与格式4.1 一致的缩进4.2 元素单独占用一行4.3 嵌套元素的缩进4.4 避免冗长的行五、字符编码六、小结在开发 HTML…...

【Wi-Fi】WiFi中QAM及16-QAM、64-QAM、512-QAM、1024-QAM、2048-QAM、4096-QAM整理

参考链接 什么是QAM&#xff1f;QAM是如何工作的&#xff1f; - 华为 不同阶QAM调制星座图中&#xff0c;符号能量的归一化计算原理 - 知乎 16 QAM modulation vs 64 QAM modulation vs 256 QAM modulation 512 QAM vs 1024 QAM vs 2048 QAM vs 4096 QAM modulation type…...

红黑树的平衡之舞:数据结构中的优雅艺术

文章目录 前言&#x1f680;一、红黑树的介绍1.1 红黑树的概念1.2 红黑树的特点1.3 红黑树的性质 &#x1f680;二、红黑树结点的定义&#x1f680;三、红黑树的框架&#x1f680;四、旋转操作&#x1f680;五、红黑树的插入操作5.1 uncle结点存在且为红5.2 uncle结点不存在或者…...

angular实现list列表和翻页效果

说明&#xff1a;angular实现list列表和翻页效果 上一页 当前页面 下一页 效果图&#xff1a; step1: E:\projectgood\ajnine\untitled4\src\app\car\car.component.css .example-form-fields {display: flex;align-items: flex-start; }mat-list-item{background: antiquew…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...