front/uni_modules/zhuo-Tooltip-Text

Tooltip文字提示

组件名：zhuo-Tooltip-Text

安装方式

HBuilderX 2.5.5，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components

开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新

基本用法

<!-- Tooltip文字提示使用示例 -->
<zhuo-Tooltip-Text :content="text2" theme="white" :font-size="14">
    <button>点击或长按显示 Tooltip</button>
</zhuo-Tooltip-Text>

Props

参数	说明	类型	默认值	可选值
content	内容	必填 ｜ Stirng	''	无
theme	自定义图标 （App必填）	可选 ｜ Stirng	'dark'	dark \ white
fontSize	字体大小	可选 ｜ Number	14	0
contentStyle	卡片内容样式	可选 ｜ String	true	无
isLongPress	是否长按	可选 ｜ Boolean	false	false\true
longPressThreshold	长按延时触发	可选 ｜Number	500

Events

无

Methods

无

Slots

名称	说明	参数
默认solt	默认样式	无

示列代码

vue2 ｜ vue3 都可

<template>
    <view class="content">
        <view class="content2">
            <zhuo-Tooltip-Text :content="text2" theme="white" :font-size="14">
                <button>点击或长按显示 Tooltip</button>
            </zhuo-Tooltip-Text>
            
            <view style="margin: 100px 0 0 0">
                项目描述
                <zhuo-Tooltip-Text :content="text2" theme="white" :font-size="14" content-style="color: red;">
                    <span style="color: blue">小丑：</span>
                </zhuo-Tooltip-Text>
                小丑竟然是你
                <zhuo-Tooltip-Text :content="text2" theme="dark" :font-size="14">小帅:</zhuo-Tooltip-Text>
                小帅是你
            </view>
        </view>
    </view>
</template>

<script setup>
const text =
    '四年春，齐侯以诸侯之师侵蔡，蔡溃，遂伐楚。楚子使与师言曰：“君处北海，寡人处南海，唯是风马牛不相及也。不虞君之涉吾地也，何故？”管仲对曰：“昔召康公命我先君大公曰：‘五侯九伯，女实征之，以夹辅周室。’赐我先君履：东至于海，西至于河，南至于穆陵，北至于无棣。尔贡包茅不入，王祭不共，无以缩酒，寡人是徵；昭王南征而不复，寡人是问。”对曰：“贡之不入，寡君之罪也，敢不共给？昭王之不复，君其问诸水滨。';
const text2 = '这是一个自动适配的提示框，内容可以很多也能适配屏幕！';
</script>

<style>
.content2 {
    position: absolute;
    left: 100rpx;
    top: 200rpx;
}
</style>