首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

BOOtstrap源码分析之 tooltip、popover

一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top、left、bottom、right、width...、height等) 2、计算tooltip的位置,是top、left、bottom、right其中一个 3、然后根据计算的位置值,运算出坐标值 4、给tooltip应用坐标值 源码分析: 1、ownerDocument...的宽度/2 – tooltip元素宽度/2   6.3、left时     6.3.1、top为定位元素(pos)的top – 定位元素(pos)的高度/2 – tooltip元素高度/2     6.3.2...、left为定位元素(pos)的left – tooltip元素的宽度   6.4、right时     6.4.1、top为定位元素(pos)的top – 定位元素(pos)高度/2 – tooltip...宽度 + tooltip宽度      6.5.3、设置三角的top或left百分比的值 Popover(弹出框) 源码文件: Popover.js Popover.scss 实现原理 1、继承tooltip

1.9K60

超实用:Vue 自定义指令合集

你可以将一些 css 样式抽象到指令中,也可以将一些 js 操作放到指令中去执行。就使用上来说,指令不用像组件一样需要引入和注册,注册后使用非常简洁方便。...tooltip 属性 / Object 可选 然后你可以在模板中任何元素上使用新的 v-tooltip property,如下: <div v-tooltip:content='tootipParams...可以传入默认图片(可选,默认无图片)、默认文字内容(可选,默认为暂无数据)、以及标示是否显示空状态(必选)。 ?...defaultStyle}"> ${image} ${content || '暂无数据...例如:常用的 css 样式、js 的一些操作、utils 中的一些工具方法、甚至是一个完整的组件都可以放进去(不过需要考虑一下性能和复杂度)。

2.1K20
领券