Mind UI Vue

# 介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

模态框组件支持函数调用和组件调用两种方式。

# 单独引用

Modal 是一个函数，调用后会直接在页面中弹出相应的模态框。

import { Modal } from 'mind-ui-vue';
Vue.use(Modal);

# 全局方法

如果你完整引入了 Mind UI Vue，它会在 Vue.prototype 上添加全局方法 $modal。

# 示例

# 消息提示

this.$modal
 .alert({
    title: "标题",
    content: "操作成功！",
  })
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

# 确认提示

this.$modal
  .confirm({
    title: "标题",
    content: "操作成功！",
  })
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

# 异步关闭

this.$modal({
  title: "标题",
  content: "异步操作",
  confirmTextColor: "red",
  confirmButtonText: "删除",
  asyncClose: true,
})
  .then((instance) => {
    setTimeout(() => {
      // on confirm
      instance.close();
    }, 1200);
  })
  .catch((instance) => {
    // on cancel
    instance.close();
  });

# 组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

# 自定义内容

自定义弹窗内容

<m-modal :visible.sync="visible" @confirm="handleClose">
  <img
    class="custom-content"
    src="https://note-file.ixook.com/FkwInL0tWpqDeRNtYHMfmaHlioTq"
  />
</m-modal>

# 异步关闭

<m-button @click="visible = true">按钮</m-button>

<m-modal
  title="删除确认"
  :visible.sync="visible"
  asyncClose
  confirmColor="#F56C6C"
  @confirm="handleClose"
  confirmButtonText="删除"
>
  异步操作
</m-modal>

export default {
  name: "modal",
  data() {
    return {
      visible: false,
    };
  },

  methods: {
    handleClose() {
      this.visible = false;
    }
  }
}

# Api

# Methods

方法 参数 返回值 说明
Modal options promise —
Modal.alert options promise 消息提示
Modal.confirm options promise 消息确认
Modal.close - - 关闭弹窗

# Options

参数 说明 类型 默认值
title 标题 String —
content 文本内容 String —
showConfirmButton 是否显示确认按钮 Boolean true
showCancelButton 是否显示取消按钮 Boolean true
confirmButtonText 确认按钮文字 String —
cancelButtonText 取消按钮文字 String —
confirmTextColor 确认按钮文字颜色 String #409EFF
asyncClose 是否开启异步关闭弹窗，开启后需要手动控制弹窗的关闭 Boolean false

# Props

参数 说明 类型 默认值
visible 是否显示弹窗 Boolean —
title 标题 String —
content 文本内容 String —
show-confirm-button 是否显示确认按钮 Boolean true
show-cancel-button 是否显示取消按钮 Boolean true
confirm-button-text 确认按钮文字 String —
cancel-button-text 取消按钮文字 String —
confirm-text-color 确认按钮文字颜色 String #409EFF
async-close 是否开启异步关闭弹窗，开启后需要手动控制弹窗的关闭 Boolean false
loading js 异步调用时会内部处理，组件形式异步调用时需手动设置 Boolean false

# Events

事件 说明 回调
confirm 弹窗确认时触发 —
cancel 弹窗取消时触发 —
close 弹窗关闭时触发 —

# Slots

名称 说明
— 自定义显示内容，如果设置了 content 属性则不生效

← Drawer 抽屉 →