微信小程序自定义提示框组件并使用插槽 tooltip

创建tooltip组件引用

• 创建一个自定义组件，例如命名为 tooltip

  • tooltip.wxml：用于定义组件的结构；

<!--components/tooltip/tooltip.wxml-->
<view class="tooltip-wrapper" hidden="{
  {hidden}}" style="left: {
  {left}}px; top: {
  {top}}px;">
  <block wx:if="{
  {useSlot}}">
    <slot></slot>
  </block>
  <block wx:else>
    <text class="tooltip-content">{
  {content}}</text>
  </block>

</view>

• tooltip.wxss：用于定义组件的样式；

.tooltip-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  padding: 8rpx;
  border-radius: 4rpx;
}

.tooltip-content {
  font-size: 20rpx;
  line-height: 20rpx;
}

• tooltip.js：用于编写组件的逻辑。

Component({
  properties: {
    content: {
      type: String,
      value: ''
    },
    useSlot: {
      type: Boolean,
      value: false
    },
    hidden: {
      type: Boolean,
      value: true
    },
    left: {
      type: Number,
      value: 0
    },
    top: {
      type: Number,
      value: 0
    }
  },
});

• tooltip.json:

{
  "component": true,  // 组件 中默认有这个属性  表示这是个组件
  "usingComponents": {}
}

组件引用

在需要使用 tooltip 的页面中引入自定义组件，并设置相应的属性和事件监听。

• 页面引用
  • 主页面的 wxml 文件：

<view class="wrapper" bindtap="handleHiddenInfo">
  <button class="button tooltip-hover tooltip-hover1" data-tooltip="提示1" catchtap="onTapButton" data-classname="tooltip-hover1">提示1</button>

  <button class="button tooltip-hover tooltip-hover2" data-tooltip="提示2" catchtap="onTapButton" data-classname="tooltip-hover2">提示2</button>

  <button class="button tooltip-hover tooltip-hover3" data-tooltip="使用插槽显示" catchtap="onTapButton" data-classname="tooltip-hover3" data-useSlot='1'>使用插槽显示</button>

  <!-- 引入 tooltip 组件 -->
  <tooltip content="{
  {tooltipContent}}" hidden="{
  {tooltipHidden}}" left="{
  {tooltipLeft}}" top="{
  {tooltipTop}}" useSlot="{
  {useSlot}}">
    <text class="content">我是{
  {tooltipContent}}</text>
  </tooltip>
</view>

• **data-tooltip：**设置 data-tooltip 属性传递提示信息

• **data-classname：**如果一个页面多个元素需要提示框，这个属性用来获取元素的类名

• **data-useSlot：**判断是否使用插槽显示提示框

• catchtap： 是一个事件捕获的触摸事件，它可以用于阻止事件冒泡。当使用 catchtap 绑定事件时，如果事件被触发，它不会向上级元素传递，而是在当前组件上处理。

• 使用插槽的提示
  

  • 主页面的 wxss 文件：

/* pages/other/other.wxss */
page {
  height: 100%;
  width: 100%;
}
.wrapper {
  height: 100%;
  width: 100%;
}
.tooltip-hover {
  position: relative;
}
button {
  margin-top: 40rpx;
}



.content {
  font-size: 20rpx;
  color: #fff;
  line-height: 20rpx;

}

• 主页面的 js 文件：

Page({
  data: {
    useSlot:false,
    position: 'bottom', // 默认显示在下方
    tooltipContent: '',  // 提示信息
    tooltipHidden: true,  // 是否隐藏 tooltip
    tooltipLeft: 0,  // tooltip 距离页面左边缘的距离
    tooltipTop: 0,  // tooltip 距离页面上边缘的距离
  },

  onTapButton(event) {
    let className = event.currentTarget.dataset.classname
    let useSlot = event.currentTarget.dataset.useslot
    const query = wx.createSelectorQuery();
    query.select(`.${className}`).boundingClientRect((rect) => {
      console.log(rect)
      const { left, top, width,height } = rect;
      const tooltipContent = event.currentTarget.dataset.tooltip;
      this.setData({
        tooltipContent,
        tooltipLeft: left + (width / 2),
        tooltipTop: top - (height/2),
        tooltipHidden: false,
        useSlot: useSlot==1
      });
    }).exec();
  },
  handleHiddenInfo() {
    this.setData({
      tooltipContent:'',
      tooltipHidden: true
    })
  },
});

• 主页面的 json 文件：

{
    "usingComponents": {
      "tooltip":"../../components/tooltip/tooltip"
    }
}