创建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, // 是否隐藏 tooltiptooltipLeft: 0, // tooltip 距离页面左边缘的距离tooltipTop: 0, // tooltip 距离页面上边缘的距离},onTapButton(event) {let className = event.currentTarget.dataset.classnamelet useSlot = event.currentTarget.dataset.useslotconst 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"}
}
)
)
