npm install @beisen/tool-tip```
用于文字提示 `使用说明
`
tip默认向上显示,当向上显示不下时,会向下显示
1. 将组件包裹在需要有提示信息的元素的外部,每个组件内部只能有一个元素
2. 适用于行内元素 如input、button、a和有span包裹的文字等
3. 一般情况下只需要设置title值即可
4. 可以传简易的html标签
`
项目运行、打包
`
* cnpm install 或 npm install
* npm run dev (开发环境打包 port:8080)
* npm run build (生产环境打包)
`
使用参数
- title : 提示内容 //需要提示的内容文字,必须是字符串
- hidden: 组件是否隐藏 可选参数 :true,false 默认不隐藏, 可不设置
- side :组件是否左右显示 可选参数 true ,false 默认为false 可不设置,一般情况下均为false
- alwaysShowTips: 总是显示tooltip,默认为false,该参数和组件显示特性有关(该组件只有当包裹文字宽度大于外部宽度,即出现...这种显示不全的情况下才会显示tooltip)
- htmlTag: 数组格式,[',,
凡是含有其他标签的字符串,均不会处理为htmltipsPosition: 'bottom' 目前仅支持bottom参数,当设置该参数为bottom时,tips会向下显示, 默认为自适应判断
- tipsReason: "功能说明" 如果有该参数,未打点情况下会优先显示该参数,打点情况下会显示两行说明,如下显示
- 名称
- B: 说明
-
- tipsDes: "功能描述", 自定义前置描述 B
npm install @beisen/tool-tip --save-dev
`2.引用组件
`
import ToolTip from "src/index"
`3.传入参数
该参数为上述参数,传入方式使用: {...参数}
`javascript
export default class TestToolTip extends React.Component {
constructor(props){
super(props)
}
render() {
let data = {
title: '提示内容',
hidden: false,
side: true,
alwaysShowTips: true,
tipsPosition: 'buttom',
htmlTag: [""], //组件内默认为 ,,,
凡是含有其他标签的字符串,均不会处理为html
tipsReason: 'reason',
tipsDes: "des"
}
return(
)
}
}
`
`javascript
内容热区
``javascript
内容热区 //左右自适应显示
` `javascript
内容热区 />
``