element-ui使用经验——如何在el-tooltip展示自定义内容
分类:计算机 | 前端 | ElementUI | 综合 685
更新:2021-10-18 22:16:38编辑
1 说明
element-ui中有一个文字提示空间el-tooltip,常用于展示鼠标移动到某个控件上面的提示信息,一般来说tooltip的展示内容是文字信息,但是el-tooltip也可以展示各种自定义的html元素。
2 展示方法
<el-tooltip class="item" effect="dark" placement="top">
<div slot="content">
<!-- 自定义内容 -->
<span>展示浏览量最高的15篇文章</span>
<el-rate
value="5"
disabled
show-score
text-color="#ff9900"
score-template="5"
>
</el-rate>
<!-- 自定义内容 -->
</div>
<i class="el-icon-info"></i>
</el-tooltip>
效果:
说明:我们定义了一个div的插槽"content",在这个div里面就可以自定义我们需要展示的html元素。
猿导航
阅读排行榜
- 1vue和el-table使用经验-如何刷新表格数据9465
- 2three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目8347
- 3uni-app使用经验—vue页面和html页面如何互相调用接口并传参4247
- 4Microsoft Visual C++ Redistributable是什么,有什么作用?3498
- 5Spring学习经验—@ResponseBody注解的使用说明3206
- 6mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)3195
- 7Druid异常解决经验—java.sql.SQLException url not set3053
- 8如何用批处理命令(bat脚本)启动和停止windows服务2836
- 9nuxt.js项目中如何添加和使用全局变量2829
- 10Intellij IDEA下的版本控制VCS的启用与关闭2727
- 11解决SpringBoot使用maven下载不了jar包的问题2516
- 12nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数2410
- 13在Nuxt.js项目的head中引用外部js文件2218
- 14在NVIDIA控制面板设置参数时提示“拒绝访问 无法应用选定的设置到您的系统”的解决方法之一2178
- 15linux中解压tar.gz文件报错“gzip: stdin: invalid compressed data--format violated”2119