活动通用弹窗 - useActModal

使用这一系列方法与 ActModal 组件配合处理活动页的弹窗逻辑，无需手动实现弹窗展示或传参。

WARNING

需要注意，这些方法已由模板代码或更高级的 Hooks 方法内置，仅当模板代码不满足使用时才应该直接使用。

使用方法

<script setup>
import {nextTick} from 'vue'
import {
  useParticipateModal,
  useLotteryResultModal,
  useActModal,
} from '@ifanrx/uni-act'

import ActModal from './act-modal.vue'

const participateModal = useParticipateModal()

// 该弹窗由 use-act-btn.js 调起，一般无需手动控制
// 这里传递的参数可从 ActModal 的作用域插槽中获取
nextTick(() => {
  participateModal.show({foo: 'bar'})
})

// 该弹窗由 useLotteryResult 调起，一般无需手动控制
const lotteryResultModal = useLotteryResultModal()

nextTick(() => {
  lotteryResultModal.win({foo: 'bar'})
  lotteryResultModal.miss({foo: 'bar'})
})

// 如果有自定义弹窗的需求，传入 ref 名称获取组件实例
const customModal = useActModal('custom')

customModal.show({foo: 'bar'})
</script>

<template>
  ...
  <ActModal ref="$actModal" />
</template>

关闭弹窗

一共有三种方法关闭弹窗：

1. 默认点击遮罩可关闭（适用于普遍情况）
2. 通过调用 .hide 方法关闭（适用于弹窗外部控制）

participateModal.hide()

3. 在 act-modal.vue 通过调用 slot 传入的 hide 方法（适用于弹窗内部控制）

<template #default="{ data: { isLucky, prizeLog}, hide }">
  <view class="modal-body lottery-result">
    <!-- 已中奖-->
    <view v-if="isLucky" class="win">
      <view @click="hide">点我关闭弹窗</view>
    </view>
  </view>
</template>

常见问题

弹窗没显示？

1. 请先检查是否设置 easycom，请看 注册全局组件。

2. 请勿在组件的 setup 阶段同步代码中调起弹窗，因为此时组件仍在初始化中：

<script setup>
import {
  useParticipateModal,
  useLotteryResultModal,
  useActModal,
} from '@ifanrx/uni-act'

const lotteryResultModal = useLotteryResultModal()

lotteryResultModal.win({foo: 'bar'}) // 🙅‍♂️，可能会无法显示

// ✅ 某些异步操作，如：请求
nextTick(() => {
  lotteryResultModal.win({foo: 'bar'})
})
</script>

3. 抽奖结果弹窗会缓存展示状态，试一下清除缓存

APIs

useActModal

▸ useActModal(refName): Object

参数

Name	Type
refName	any

返回值

Object

Name	Type
hide	() => Promise<void>
show	(args: {}) => Promise<void>

hide: () => Promise<void>

-

---

show: (args: {}) => Promise<void>

-

---

源码

act-hooks/use-act-modal.js

useParticipateModal

▸ useParticipateModal(): Object

返回值

Object

Name	Type
hide	() => Promise<void>
show	(args: {}) => Promise<void>

hide: () => Promise<void>

-

---

show: (args: {}) => Promise<void>

-

---

源码

act-hooks/use-act-modal.js

useLotteryResultModal

▸ useLotteryResultModal(): Object

返回值

Object

Name	Type
hide	() => Promise<void>
miss	(args: {}) => Promise<void>
win	(args: {}) => Promise<void>

hide: () => Promise<void>

-

---

miss: (args: {}) => Promise<void>

-

---

win: (args: {}) => Promise<void>

-

---

源码

act-hooks/use-act-modal.js