更新记录

1.0.0(2024-05-24)

1.0.0(2024-05-22)

ProTooltip 文字提示气泡框

注:该版本是基于vue2开发的,所以只支持vue2,后续会升级vue3版本 文字提示--当文字过多没法全部显示的时候,使用tooltip组件,以气泡的方式进行展示,长按文本的时候展示气泡,按住不动,气泡不会消失,之后松开了,气泡才会在1.5s后自动消失

功能

  1. 支持手动控制气泡框显示,隐藏
  2. 支持自定义气泡文字的颜色
  3. 支持设定气泡悬浮的位置
  4. 支持对富文本的内容进行解析
  5. 支持设定tooltip气泡的最大宽度
  6. app端支持长按文字出现气泡,1.5秒后自动消失,H5端点击文字出现气泡,同样是1.5秒后自动消失

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

1.0.0(2024-05-22)

ProTooltip 文字提示气泡框

注:该版本是基于vue2开发的,所以只支持vue2,后续会升级vue3版本 文字提示--当文字过多没法全部显示的时候,使用tooltip组件,以气泡的方式进行展示,长按文本的时候展示气泡,按住不动,气泡不会消失,之后松开了,气泡才会在1.5s后自动消失

功能

  1. 支持手动控制气泡框显示,隐藏
  2. 支持自定义气泡文字的颜色
  3. 支持设定气泡悬浮的位置
  4. 支持对富文本的内容进行解析
  5. 支持设定tooltip气泡的最大宽度
  6. app端支持长按文字出现气泡,1.5秒后自动消失,H5端点击文字出现气泡,同样是1.5秒后自动消失

代码示例

<template>
    <view class="content">
        <!-- 基本使用 -->
    <pro-tooltip content="测试文本">测试文本</pro-tooltip>
    <!-- 富文本内容 -->
    <pro-tooltip richText content="<p>测试文本<p>">测试文本</pro-tooltip>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

API

ProTooltip props

参数 说明 类型 默认值 版本
visible 控制tooltip展示,隐藏 Boolean false 1.0.0
color 自定义气泡文字的颜色 String #fff 1.0.0
placement 自定义气泡悬浮出现的位置 Object top 1.0.0
content 文本内容 String ' ' 1.0.0
show 是否展示tooltip Boolean false 1.0.0
richText 是否是富文本解析 Boolean false 1.0.0
maxWidth tooltip气泡的最大宽度 Number 800 1.0.0

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问