Modal 模态框

创建一个模态框，用于强调特定的页面元素，并阻止用户进行其他操作。

代码演示

基础用法

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

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

// uni_modules
import { showModal } from '@/uni_modules/fant-mini'
// npm
import { showModal } from 'fant-mini'
export default {
  data() {
    return {
      showCancel: false
    }
  },
  methods: {
    open() {
      showModal({
        title: '提示',
        showCancel: this.showCancel,
        content: '哈喽啊，树先生'
      })
    }
  }
}

取消

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

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

export default {
  data() {
    return {
      showCancel: false
    }
  },
  methods: {
    open() {
      showModal({
        title: '提示',
        content: '哈喽啊，树先生',
        showCancel: this.showCancel,
        cancelText: '返回',
        cancelColor: '#333'
      })
    }
  }
}

确认

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

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

export default {
  data() {
    return {
      showCancel: false
    }
  },
  methods: {
    open() {
      showModal({
        title: '提示',
        content: '哈喽啊，树先生',
        confirmText: '提交',
        confirmText: '#333'
      })
    }
  }
}

事件

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

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

export default {
  data() {
    return {
      showCancel: false
    }
  },
  methods: {
    open() {
      showModal({
        title: '提示',
        content: '哈喽啊，树先生',
        success: (action) => {
          if (action.confirm) {
            // 点击的确认按钮
            console.log('确认')
          }
        },
        fail() => {},
        complete() => {},
      })
    }
  }
}

方法

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

Events

Event Name	Description	Parameters
input	消息展示状态变更时触发	value:Boolean 消息展示状态，建议通过v-model双向绑定输入值，而不是监听此事件的形式

Slots

Name	Description	Default Slot Content
title	标题	-
content	内容区	-
operation	操作按钮	-