1.4.0 • Published 3 years ago
easy-tip v1.4.0
easy-tip
遇到过文字溢出用户hover时才展示弹框的场景吗?easy-tip轻松帮你解决!
Demo
快速开始
- 安装
npm install easy-tip --save
或
yarn add easy-tip
- 简单使用( 两行代码即可完成基本功能)
import EasyTip from 'easy-tip';
const eastTip = new EasyTip(options); // 初始化实例, options参数在下表,可选
eastTip.init();// 开始执行,只要出现文字溢出的情况的都会出现弹层进行提示
- 可选参数options
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
effectiveArea | HTMLElement|Document,可选 | Document | 实例作用的区域,默认全局 |
customStyle | CustomStyle,可选 | - | 覆盖弹框和三角指示标的样式,下面详解参数 |
mustDisplaySign | String,可选 | - | 必定触发展示的标记,如传入"test", 则在需要的元素dataset上写入你传的key 值为true即可。如: |
needEffectiveSign | Boolean,可选 | false | 只对标记的元素计算弹框是否展示,传入true后,在需要EasyTip计算的元素打上标记,如:, |
triggerEvent | "mouse"|"click"|"select",可选 | mouse | 触发的时机,mouse为鼠标移入,click为点击展示,select为选中文本内容 |
direction | "vertical" | "horizontal",可选 | vertical | 弹框展示的位置,vertical:上下, horizontal: 左右, 默认在上下展示 |
contentRender | Function,函数返回了当前文本内容和触发元素两个参数,可选 | - | 自定义渲染内容,需要返回htmlElement 或者 dom字符串片段 |
- customStyle
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
wrap | css样式,可选 | - | 最外层弹框的样式 |
triangle | css样式,可选 | - | 三角指示标的样式 |
例子:
const eastTip = new EasyTip({
customStyle: {
wrap:{ backgroundColor: 'white', maxWidth: '200px'} //最外层弹框的样式
triangle: { backgroundColor: 'white'} // 三角指示标的样式
}
});
- API
init, 初始化EasyTip
import EasyTip from 'easy-tip';
const eastTip = new EasyTip(options);
eastTip.init();// 初始化后才会开始计算弹框
destroy,销毁EasyTip
import EasyTip from 'easy-tip';
const eastTip = new EasyTip(options);
eastTip.init();
.....
eastTip.destroy();
hide,隐藏弹框
import EasyTip from 'easy-tip';
const eastTip = new EasyTip(options);
eastTip.init();
.....
//当触发弹框后,若用户想自己手动关闭弹框可调用
eastTip.hide();
自定义使用
该功能主要使用在一些需要定制化弹窗功能的元素,换句话说easy-tip只提供计算好位置的弹框给你,其余都交给使用者定义(渲染时机,内容等)。
- 接入
import EasyTip from 'easy-tip';
// 接入方式同上,主要传参有区别
const eastTip = new EasyTip(options);
eastTip.init();
- options参数
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
effectiveArea | HTMLElement | - | 实例作用的元素 |
customStyle | CustomStyle,可选 | - | 同上 |
triggerEvent | "mouse"|"click"|"select"|"none",可选 | mouse | 触发的时机,mouse为鼠标移入,click为点击展示,select为选中文本内容, none: 不绑定触发时机 |
direction | "vertical" | "horizontal",可选 | vertical | 弹框展示的位置,vertical:上下, horizontal: 左右, 默认在上下展示 |
custom | 必选,一些自定义的参数 | 必选,一些自定义的参数,下面详解 |
- custom
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
byTextOverflow | Boolean,可选 | False | 是否根据文字溢出来决定是否展示 |
canDisplay | Function: () => boolean,可选 | - | 用户传一个返回布尔值的函数,为true时,才能够展示。方便用户决定某些时机不需要展示 |
contentRender | Function,函数返回了当前文本内容和触发元素两个参数,可选 | - | 自定义渲染内容,需要返回htmlElement 或者 dom字符串片段 |
- API(自定义模式下比简单模式多了2个API)
display,展示弹框,位置默认根据你传入的effectiveArea,可手动传入元素更改位置,如下:
import EasyTip from 'easy-tip';
// 接入方式同上,主要传参有区别
const eastTip = new EasyTip(options);
eastTip.init();
eastTip.show();
// 或者
eastTip.show(document.getElementId('demo'));// 弹幕展现在你想出现的元素上,位置EasyTip会自动重新计算
autoDisplayOrHide,自己判断是开or关🆚弹框,位置默认根据你传入的effectiveArea,可手动传入元素更改位置,如下:
import EasyTip from 'easy-tip';
// 接入方式同上,主要传参有区别
const eastTip = new EasyTip(options);
eastTip.init();
eastTip.autoDisplayOrHide(); // 当弹框展开的时候再次执行则关闭,关闭的时候执行则打开
// 或者
eastTip.show(document.getElementId('demo'));// 弹幕展现在你想出现的元素上,位置EasyTip会自动重新计算
init,destroy,hide方法 同上
- 自定义使用例子
// <div id="demo">自定义</div>
import EasyTip from 'easy-tip';
// 接入方式同上,主要传参有区别
const eastTip = new EasyTip({
effectiveArea: document.getElementById('demo'),
triggerEvent: 'mouse',
custom: {
contentRender: (str, el) => `<div>123123213${str}</div>`,
}
});
eastTip.init();
eastTip.show();
本项目长期维护更新,有建议或者发现bug欢迎互相交流
希望能够帮助到你
开源协议
easy-tip遵循MIT开源协议
1.4.0
3 years ago
1.3.0
3 years ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago
1.1.0
3 years ago
1.0.0
3 years ago
0.0.22
3 years ago
0.0.20
3 years ago
0.0.21
3 years ago
0.0.16
3 years ago
0.0.17
3 years ago
0.0.14
3 years ago
0.0.15
3 years ago
0.0.13
3 years ago
0.0.12
3 years ago
0.0.11
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago