代码拉取完成,页面将自动刷新
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基础使用</text>
<view class="u-demo-block__content">
<up-tooltip
:text="text1"
overlay
></up-tooltip>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">下方显示</text>
<view class="u-demo-block__content" style="padding-bottom: 30px;">
<up-tooltip
:text="text2"
direction="bottom"
></up-tooltip>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">扩展按钮</text>
<view class="u-demo-block__content">
<up-tooltip
:text="text3"
:buttons="buttons1"
@click="click"
></up-tooltip>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自动调整位置</text>
<view class="u-demo-block__content">
<up-tooltip
:text="text4"
:buttons="buttons2"
></up-tooltip>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">高亮选中文本背景色</text>
<view class="u-demo-block__content">
<up-tooltip
:text="text5"
:buttons="buttons3"
bgColor="#e3e4e6"
></up-tooltip>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
text1: '长按文本,上方提示',
text2: '长按文本,下方提示',
text3: '显示多个扩展按钮',
text4: '自动调整气泡位置',
text5: '长按文本,显示背景色',
buttons1: ['扩展'],
buttons2: ['扩展', '搜索', '翻译'],
buttons3: ['扩展', '搜索', '翻译']
}
},
onLoad() {
},
methods: {
click(index) {
console.log('index', index);
}
}
}
</script>
<style lang="scss">
.u-page {
}
.u-demo-block__content {
padding-top: 10px;
}
</style>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。