logpm/uni_modules/fant-mini-plus/components/hd-modal/INDEX.md

代码演示

基础用法

title 提示标题，content 提示内容。

<hd-modal></hd-modal>
<hd-button @click="open">打开对话框</hd-button>

<script lang="ts" setup>
import { useModal } from '@/uni_modules/fant-mini-plus'
import { ref } from 'vue'
const modal = useModal()
function open() {
  modal.showModal({
    title: '提示',
    content:'哈喽啊，树先生'
  })
}
</script>

取消

showCancel 是否显示取消按钮，默认为 true，cancelText 取消按钮的文字，默认为"取消"，cancelColor 取消按钮的文字颜色，默认为"#000000"。

<hd-modal></hd-modal>
<hd-button @click="open">打开对话框</hd-button>

<script lang="ts" setup>
import { useModal } from '@/uni_modules/fant-mini-plus'
import { ref } from 'vue'
const modal = useModal()
function open() {
  modal.showModal({
      title: '提示',
      content: '哈喽啊，树先生',
      showCancel: true,
      cancelText: '返回',
      cancelColor: '#333'
  })
}
</script>

确认

confirmText 确定按钮的文字，默认为"确定"，confirmText 确认按钮的文字颜色，默认为"#3CC51F"。

<hd-modal></hd-modal>
<hd-button @click="open">打开对话框</hd-button>

<script lang="ts" setup>
import { useModal } from '@/uni_modules/fant-mini-plus'
import { ref } from 'vue'
const modal = useModal()
function open() {
  modal.showModal({
      title: '提示',
      content: '哈喽啊，树先生',
      confirmText: '提交',
      confirmText: '#333'
  })
}
</script>

事件

success 调用成功的回调函数，fail 调用失败的回调函数，complete 调用结束的回调函数（调用成功、失败都会执行）。

<hd-modal></hd-modal>
<hd-button @click="open">打开对话框</hd-button>

<script lang="ts" setup>
import { useModal } from '@/uni_modules/fant-mini-plus'
import { ref } from 'vue'
const modal = useModal()
function open() {
  modal.showModal({
        title: '提示',
        content: '哈喽啊，树先生',
        success: (action) => {
          if (action.confirm) {
            // 点击的确认按钮
            console.log('确认')
          }
        },
        fail() => {},
        complete() => {},
  })
}
</script>

方法

fant-mini 中导出了以下 Modal 相关的辅助函数：

方法名	说明	参数	返回值
showModal	展示对话框	ModalOptions	Modal

ModalOptions 数据结构

参数	说明	类型	是否必填	默认值
title	提示的标题。	String	false	提示
content	提示的内容。	String	false	-
showCancel	是否显示取消按钮。	Boolean	false	true
cancelText	取消按钮的文字	String	false	取消
cancelColor	取消按钮的文字颜色	String	false	#282C34
confirmText	确认按钮的文字	String	false	确定
confirmColor	确认按钮的文字颜色	String	false	#1C64FD
success	方法调用成功的回调函数	Function	false	返回值:result:ModalRes
fail	方法调用失败的回调函数	Function	false	返回值:result:ModalRes
complete	调用结束的回调函数（调用成功、失败都会执行）	Function	false	返回值:result:ModalRes

ModalRes 数据结构

参数	说明	类型
confirm	用户是否点击了确定按钮。	Boolean
cancel	用户是否点击了取消。	Boolean