bs-ui-tooltip

Base Readme > 这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

Usage no npm install needed!

<script type="module">
  import bsUiTooltip from 'https://cdn.skypack.dev/bs-ui-tooltip';
</script>

README

bs-ui-tooltip

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

功能介绍

带箭头的半透明提示框
使用示例：example/pages/index

安装

  • 复制example/utils/bsPage.js文件到项目的任意位置【建议放在项目的utils目录下】

  • 在app.js文件中引入const bsPage = require('./utils/bsPage.js')，在onLaunch生命周期里重置Page方法。

App({
    onLaunch() {
        Page = bsPage
    }
})
  • 在项目根目录下执行命令行
npm init

npm install bs-ui-tooltip
  • 在微信开发者工具中构建npm，项目的根目录会生成miniprogram_npm目录，tooltip组件就放在里面。
  • app.json页面中引入tooltip组件。
{
    "usingComponents": {
        "bs-tooltip": "miniprogram_npm/bs-ui-tooltip/index"
    }
}

使用方法

  • 如果你的页面是Page请引入（defaultBhv.js文件跟tooltip组件同目录）
const tooltipBhv = require('/miniprogram_npm/bs-ui-tooltip/defaultBhv.js').pageBhv
  • 如果你的页面是Component请引入。
const tooltipBhv = require('/miniprogram_npm/bs-ui-tooltip/defaultBhv.js').compBhv
  • 然后，behaviors: [tooltipBhv], 放入你的页面。
Page({
    behaviors: [tooltipBhv]
})
// 或
Component({
    behaviors: [tooltipBhv]
})
  • 配置完后可以开始使用组件了，像这样：
// 页面js文件
const tooltipBhv = require('/miniprogram_npm/bs-ui-tooltip/defaultBhv.js').pageBhv
Page({
    behaviors: [tooltipBhv],
    data: {
        msg: '测试msg'
    }
})

<!--页面结构，tooltipOption保存在defaultBhv.js中。-->
<view class="page" catchtap="showTooltip">
    <button class="tooltip" id="tooltip1" data-msg="0000" data-tooltip="false" >不显示tooltip</button> 
    <button class="tooltip tooltip1" id="tooltip2" data-msg="{{msg}}" data-tooltip="ooo" >不显示tooltip</button> 
    <button class="tooltip tooltip2" id="tooltip3" data-msg="" data-tooltip="" >不显示tooltip</button> 
    <button class="tooltip tooltip3" id="tooltip4" data-msg="3344" data-tooltip="{{false}}" >不显示tooltip</button> 
    <!--pcap组件是案例中用于测试的自定义组件,如果项目中不需要用到跨组件展示tooltip，可以不看pcap组件相关部分。-->
    <pcap bind:crossTooltip="showTooltip"></pcap>
</view>
<bs-tooltip option="{{tooltipOption}}" ></bs-tooltip>

<!--pcap组件结构-->
<view catchtap="crossTooltip" >
    <button id="tooltip1" data-msg="comppppppppppp" data-tooltip >显示tooltip</button>
    <button id="tooltip14" data-msg="测试多层级组件" data-tooltip="{{true}}" >显示tooltip</button>
</view>

// pcap组件js
const tooltipBhv = require('/miniprogram_npm/bs-ui-tooltip/defaultBhv.js').compBhv
Component({
    behaviors: [tooltipBhv],
    data: {
    },
    methods: {
    },
})

  • 组件中可以在最外层页面容器上绑定catchtap="crossTooltip"【也可以在每个button上分别绑定catchtap事件】，如果你的项目中需要用到组件嵌套（无视嵌套层次）只需要在页面中的最顶部父组件上绑定bind:crossTooltip="showTooltip"就能把组件中的点击事件传递到页面上。

  • Page页面可以在button上绑定catchtap="showTooltip"【也可以在最外层容器上绑定catchtap事件】，data-msg="0000"可以传递展示的内容，支持{{msg}}方式，data-msg不设置默认为空字符串

  • button上都必须要绑定data-tooltip，值为true的时候，【Boolean】点击按钮才会出现提示框

  • button上的id为必须项，且同一个组件或同一个页面内不能重复。

接口

Properties

Property Type Default Value Comments
option Object tooltipOption 绑定在父组件上，根据tooltipOption是否为null判断tooltip是否展示，不为null时，是个经过封装的event对象，保存在defaultBhv.js中。【固定写法】
catchtap Function showTooltip 绑定在页面或组件的根节点上，处理当前范围所有按钮的点击事件，保存在defaultBhv.js中【固定写法】
id String -- 按钮的id，页面或组件范围不能重复，【必须项】
data-msg String '' 按钮的消息，绑定在每个按钮上，点击展示相对应的消息内容，【必须项】
data-tooltip Boolean false 按钮点击触发类型，绑定在每个按钮上，如果为true，则触发tooltip提示框
bind:crossTooltip Function showTooltip 如果你的按钮在其他的组件中，这个时候需要用到它，绑定在其他组件的最外层父组件上【固定写法】

其他

  • 特别提醒：按钮的点击事件请用catchtap绑定，不建议使用bindtap。
  • 如果想知道详细的实现原理，请看example示例源码，example目录是一个完整的小程序
  • example/miniprogram_npm 是tooltip组件目录，example/pages是示例项目