render和h函数的使用

			// 如果没有配置项,则可以省略不写 {}
			h("div", [
                h('h-tooltip', // 在tooltip中进行改造
                // ----- h-tooltip 的配置项 -----Start
                  {
                    props: {
                      placement: "top-start",
                      // content: '提示内容',
                      transfer: true
                    },
                    style: {
                      'overflow': 'hidden',
                      'text-overflow': 'ellipsis',
                      'white-space': 'nowrap',
                      'display': 'inline-block',
                      'width': '200px'
                    }
                  },
                  // ----- h-tooltip 的配置项 -----End
                  
                  // ----- h-tooltip 的主要内容 -----Start
                  [
                  	// ----- h-tooltip 作为插槽,鼠标上移后的提示内容 -----Start
                    h('div', {
                        slot: 'content' // 设置为提示内容插槽
                      }, [
                      // ----- h-tooltip 提示内容文字前的图标 -----Start
                      h('span', {
                      	// ----- h-tooltip 点击图标触发事件
                        on: {
                          click: () => {
                            console.log('--------------触发事件')
                          }
                        }
                      }, [
                      	// ----- h-tooltip 图标
                        h('i', {
                          class: 'el-icon-document-copy'
                        })
                      ]),
                      // ----- h-tooltip 提示内容文字前的图标 -----End
                      // ----- h-tooltip 提示内容的文字 -----Start
                      h('p', {
                        style: {
                          display: "inline-block",
                          marginLeft: "3px"
                        }
                      }, '提示的内容')
                      // ----- h-tooltip 提示内容的文字 -----End
                    ]),
                    // ----- h-tooltip 作为插槽,鼠标上移后的提示内容 -----End
                    
                    // ----- h-tooltip 要展示的内容 -----Start
                    h('p', {
                      style: {
                        'overflow': 'hidden',
                        'text-overflow': 'ellipsis',
                        'white-space': 'nowrap',
                        'display': 'inline-block',
                        'width': '200px'
                      }
                    }, '一个需要鼠标上移后出现提示的内容')
                    // ----- h-tooltip 要展示的内容 -----End
                    
                  ]
                  // ----- h-tooltip 的主要内容 -----End
                )
              ])

在这里插入图片描述

参考:vue2.x的h函数(createElement)与vue3中的h函数
vue使用render函数渲染table表格某一列的数组数据

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

阿里巴巴面试高频题:JVM内存模型通俗解释!

大家好,我是你们的小米,今天我要和大家一起来探讨一个热门话题——JVM内存模型!作为计算机科班出身的小米,一直对技术充满热情,喜欢和大家分享各种有趣的知识。最近在准备阿里巴巴的面试时,遇到了一个非常有…

RestTemplate

RestTemplate介绍 RestTemplate是Spring提供的用于访问RESTful服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率。RestTemplate默认依赖JDK提供http连接的能力(HttpURLConnection),…

docker-php扩展

生成扩展骨架 环境:docker-compose、php74 1.本地要有一份 php-src git clone https://github.com/php/php-src.git cd php-src git checkout PHP-7.4.52.\www\php-src\ext可以看到有一个 ext_skel.php 文件 3.通过ext_skel.php脚本创建了一个hello扩展&#xf…

SpringBoot复习:(51)默认情况下DataSource是怎么创建出来的,是什么类型的?

DataSource是通过DataSourceAutoConfiguration创建的,这个类代码如下: 可以看到DataSourceAutoConfiguration有个静态内部类PooledDataSourceConfiguration,在这个类上有个Import注解,导入了DataSourceConfiguration.Hikari这个类&#xff0…

数据结构——链表详解

链表 文章目录 链表前言认识链表单链表结构图带头单循环链表结构图双向循环链表结构图带头双向循环链表结构图 链表特点 链表实现(带头双向循环链表实现)链表结构体(1) 新建头节点(2) 建立新节点(3)尾部插入节点(4)删除节点(5)头部插入节点(6) 头删节点(7) 寻找节点(8) pos位置…

Unknown tree updater grow_gpu_histb报错

报错显示:由于xgboost的问题而报错 报错显示:Unknown tree updater grow_gpu_histb 原因是 XGBoost 在尝试使用 GPU 加速时无法识别指定的树更新器。也就是当前xgboost版本中没有grow_gpu_histb组件,所以需要安装正确的版本。 经搜索&#…

银河麒麟服务器v10 sp1 .Net6.0 上传文件错误

上一篇:银河麒麟服务器v10 sp1 部署.Net6.0 http https_csdn_aspnet的博客-CSDN博客 .NET 6之前,在Linux服务器上安装 libgdiplus 即可解决,libgdiplus是System.Drawing.Common原生端跨平台实现的主要提供者,是开源mono项目。地址…

ios swift5 collectionView 瀑布流(两列)

文章目录 1.瀑布流1.1 demo地址1.2 记得把部署的最低版本由8改成11,13甚至更高。不然编译会报错 2.动态计算图片和文字的高度 1.瀑布流 1.1 demo地址 CollectionViewWaterfallLayout - github 1.2 记得把部署的最低版本由8改成11,13甚至更高。不然编译会报错 2.动态计算图片和…

问道管理:机器人概念走势活跃,新时达涨停,拓斯达、丰立智能等大涨

机器人概念17日盘中走势活跃,到发稿,拓斯达大涨18%,昊志机电涨近16%,丰立智能涨超13%,步科股份、优德精细涨超10%,新时达涨停,天玑科技、兆龙互联、中大力德涨逾9%。 消息面上,8月16…

设计模式

本文主要介绍设计模式的主要设计原则和常用设计模式。 一、UML画图 1.类图 2.时序图 二、设计模式原则 1.单一职责原则 就是一个方法、一个类只做一件事; 2.开闭原则 就是软件的设计应该对拓展开放,对修改关闭,这在java中体现最明显的就…

spring详解

spring是于2003年兴起的一款轻量级的,非侵入式的IOC和AOP的一站式的java开发框架,为简化企业级应用开发而生。 轻量级的:指的是spring核心功能的jar包不大。 非侵入式的:业务代码不需要继承或实现spring中任何的类或接口 IOC&…

Spring5学习笔记—AOP编程

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: Spring专栏 ✨特色专栏: M…

国企的大数据岗位方向的分析

现如今大数据已无所不在,并且正被越来越广泛的被应用到历史、政治、科学、经济、商业甚至渗透到我们生活的方方面面中,获取的渠道也越来越便利。 今天我们就来聊一聊“大屏应用”,说到大屏就一定要聊到数据可视化,现如今&#xf…

eclipse 导入项目js报错问题

eclipse 导入项目后会出现项目中的js文件报错(红叉),如下图所示,有时候报错的文件很多,需要集中处理。 解决办法: 右键项目名称》Properties》MyEclipse》JavaScript》Include Path,在右侧选择“…

linux 文件权限识别及其修改

一、文件权限认识 在 Linux 系统中,一切皆文件,目录也是一种文件形式叫目录文件,它们的属性主要包含:索引节点(inode),类型、权限属性、链接数、所归属的用户和用户组、最近修改时间等内容。 如下为根目录下目录&…

基于OpenCV的人脸识别和模型训练系统(万字详解)

前言 我们身边的人脸识别有车站检票,监控人脸,无人超市,支付宝人脸支付,上班打卡,人脸解锁手机。 人脸检测是人脸识别系统组成的关键部分之一,其目的是检测出任意给定图片中的包含的一个或多个人脸&#…

网络通信原理IP头部格式(第四十二课)

字段作用解析:1)版本: 指的IP地址的版本 (IPv4 或 IPV6)2)首部长度: 次数据包的首部长度一共是多少,没有加可选项3)优先级与服务类型:表示****数据包是否需要优选传递4)总长度: 表示的是整个数据包的大小,也就****是首部+数据5)标识符、标志、段偏移量:的作用将拆开的…

ts与vue

ts与Vue 如果你已经学习了typeScript,但不知道如何在vue项目中使用,那么这篇文章将会很适合你。参考千峰教育 kerwin视频 1.会自动推导,隐士推导。提示 类型系统。 独立模块。 isolatedModules选项:是否配置为独立的模块。 减少报错 let …

Springboot项目启动后按顺序加载自定义类 (demo)

1. 实现ApplicationRunner接口, 重写run方法 import lombok.extern.slf4j.Slf4j; import org.springframework.boot.ApplicationArguments; import org.springframework.boot.ApplicationRunner; import org.springframework.core.annotation.Order; import org.springframewor…

IDEA项目实践——JavaWeb简介以及Servlet编程实战

系列文章目录 IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介 IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——动态SQL、关系映射、注解开发 IDEA项目实践——Spring框架简介,以及IOC注解 IDEA项目实践——Spring当…
最新文章