<!-- 基础用法 -->
<re-popover :visible="isActive('basic-default')" content="弹出气泡内容" placement="top" theme="dark" @update:visible="updateVisible('basic-default', $event)" > <view class="demo-button demo-button--outline"> <text class="demo-button__text demo-button__text--outline">带箭头</text> </view> </re-popover>
<re-popover :visible="isActive('basic-no-arrow')" content="弹出气泡内容" placement="top" theme="dark" :show-arrow="false" @update:visible="updateVisible('basic-no-arrow', $event)" > <view class="demo-button demo-button--outline"> <text class="demo-button__text demo-button__text--outline">不带箭头</text> </view> </re-popover>
<re-popover :visible="isActive('basic-lock')" content="需要再次点击按钮或切换其他示例才会关闭" placement="top" theme="brand" :close-on-click-outside="false" @update:visible="updateVisible('basic-lock', $event)" > <view class="demo-button demo-button--outline"> <text class="demo-button__text demo-button__text--outline">外部不关闭</text> </view> </re-popover>
<re-popover :visible="isActive('basic-custom')" placement="top" theme="dark" @update:visible="updateVisible('basic-custom', $event)" > <template #content> <view class="demo-menu"> <view class="demo-menu__item" @click="onMenuSelect('选项1')"> <text class="demo-menu__text">选项1</text> </view> <view class="demo-menu__item" @click="onMenuSelect('选项2')"> <text class="demo-menu__text">选项2</text> </view> <view class="demo-menu__item" @click="onMenuSelect('选项3')"> <text class="demo-menu__text">选项3</text> </view> </view> </template> <view class="demo-button demo-button--outline"> <text class="demo-button__text demo-button__text--outline">自定义内容</text> </view> </re-popover>
<!-- 气泡主题 -->
<re-popover :visible="isActive(item.key)" content="弹出气泡内容" placement="top" :theme="item.theme" @update:visible="updateVisible(item.key, $event)" > <view class="demo-button" :style="item.buttonStyle"> <text class="demo-button__text" :style="item.textStyle">{{ item.label }}</text> </view> </re-popover>
<!-- 弹出位置 -->
<re-popover :visible="isActive(item.key)" content="弹出气泡内容" :placement="item.placement" theme="dark" @update:visible="updateVisible(item.key, $event)" > <view class="demo-button demo-button--outline demo-button--small"> <text class="demo-button__text demo-button__text--outline">{{ item.label }}</text> </view> </re-popover>
<re-popover :visible="isActive(item.key)" content="弹出气泡内容" :placement="item.placement" theme="dark" @update:visible="updateVisible(item.key, $event)" > <view class="demo-button demo-button--outline demo-button--small"> <text class="demo-button__text demo-button__text--outline">{{ item.label }}</text> </view> </re-popover>
<re-popover :visible="isActive(item.key)" content="气泡内容" :placement="item.placement" theme="dark" @update:visible="updateVisible(item.key, $event)" > <view class="demo-button demo-button--outline demo-button--wide"> <text class="demo-button__text demo-button__text--outline">{{ item.label }}</text> </view> </re-popover>
<re-popover :visible="isActive(item.key)" content="气泡内容" :placement="item.placement" theme="dark" @update:visible="updateVisible(item.key, $event)" > <view class="demo-button demo-button--outline demo-button--wide"> <text class="demo-button__text demo-button__text--outline">{{ item.label }}</text> </view> </re-popover>
