ifanrx 工具库

Appearance

弹窗控制相关 Hooks ​

这是一系列控制弹窗的 hooks 方法，配合组件挂载，实现消息（询问）弹窗、错误通知和轻提示等功能：

这些 hooks 方法可以被视作是《微信原生 API 封装》的增强版本，当原生 API 不足以满足特定需求时，你可以依赖这些 hooks 方法来实现更高级的弹窗、消息通知。

基本用法 ​

useDialog ​

跟 message.showModal 类似，但支持更多功能，比如异步关闭、自定义 slot 等。

vue
<script setup>
import {useDialog} from '@ifanrx/uni-mp'

const {showDialog} = useDialog()
const {showDialog: showCustomDialog} = useDialog('$custom-dialog')

// 异步关闭
await showDialog({
  title: '提示',
  content: '这是一条提示信息',
  confirm: async () => {
    message.showLoading('请求中')
    await sleep(1500)
    message.hideLoading()

    message.showToast('你点击了确定')
  },
  cancel: () => {
    message.showToast('你点击了取消')
  },
})

// 不显示取消按钮
showDialog({
  title: '提示',
  content: '这是一条提示',
  showCancel: false,
  confirmColor: '#333',
})

// 其它弹窗类型，自定义 slot
showCustomDialog({
  title: '提示',
  type: 'warn',
})
</script>

<template>
  <!-- 需配合挂载 mp-dialog 组件 -->
  <mp-dialog ref="$dialog" />

  <mp-dialog ref="$custom-dialog">
    <view>
      <view>这是自定义 slot 的内容</view>
      <view>这是自定义 slot 的内容</view>
      <view>这是自定义 slot 的内容</view>
    </view>
  </mp-dialog>
</template>

TIP

默认情况下 ref 的名称是 $dialog，因此在单一实例情况下，无需传给 useDialog。但如果存在多个 mp-dialog 实例，则需要自定义 ref 名称，那么在 useDialog 中就需要传入，同时需要确保自定义的 ref 名称以 $ 开头：

vue
<script setup>
const {showDialog} = useDialog()
const {showDialog: showDialog2} = useDialog('$dialog-2')
</script>

<template>
  <mp-dialog ref="$dialog" />
  <mp-dialog ref="$dialog-2" />
</template>

useMessage ​

跟 message.showToast 类似，区别在于它们的显示方式和位置不同。

根据不同的场景，你可以选择使用不同的 API。

vue
<script setup>
import {useMessage} from '@ifanrx/uni-mp'

const {showMessage} = useMessage()

showMessage('这是一条提示')
showMessage('这是一条提示', {type: 'warning'})
</script>

<template>
  <!-- 需配合挂载 mp-message 组件 -->
  <mp-message ref="$message" />
</template>

TIP

与 useDialog 相同，useMessage 默认 ref 名称为 $message，如需自定义 ref 名称，则需要传入。

usePrompt ​

跟 message.showPrompt 类似，区别同 useDialog，不再赘述。

vue
<script setup>
import {usePrompt} from '@ifanrx/uni-mp'

const {showPrompt} = usePrompt()

showPrompt({
  title: '请输入',
  confirm: async value => {
    message.showLoading('请求中')
    await sleep(1500)
    message.hideLoading()

    message.showToast(`你输入了：${value}`)
  },
  cancel: () => {
    message.showToast('你点击了取消')
  },
})
</script>

<template>
  <!-- 需配合挂载 mp-dialog 组件 -->
  <mp-dialog ref="$dialog" />
</template>

相关文档 ​