mp-notice-modal 紧急通知弹窗

基于 mp-dialog 封装，在 tabBar 页面时会回退为使用 wx.showModal

需与 use-notice-modal-settings 搭配使用

代码演示

一般建议在项目内对 mp-notice-modal 进行简单的二次封装

components/app-notice-modal/app-notice-modal.vue

<script setup>
import {useNoticeModalSettings} from '@ifanrx/uni-mp'
import {safeGet} from 'licia'

const SETTINGS_DOMAIN = '...'
const APPID = '...'
const FILE_NAME =
  VITE_BAAS_DEV || VITE_BAAS_QA ? 'settings-dev.json' : 'settings.json'

const URL = `${SETTINGS_DOMAIN}/${APPID}-${FILE_NAME}`

const props = defineProps({
  key: {
    type: String,
    default: '',
  },
})

const {data: notice} = useNoticeModalSettings(URL, {
  select: source => {
    if (!props.key) return null

    return safeGet(source, ['notice', props.key])
  },
})
</script>

<template>
  <mp-notice-modal v-if="key" :notice="notice" />
</template>

在对应页面使用

<template>
  <!-- 同时显示 act1 以及 global 紧急弹窗 -->
  <app-notice-modal key="act1" />
  <app-notice-modal key="global" />
</template>

API

Props

Prop name	Description	Type	Values	Default
notice	通知内容	object|null	-	null

源码

组件