Dialog 对话框

介绍

模态对话框，在浮层中显示，引导用户进行相关操作，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

弹出框组件支持函数调用和组件调用两种方式。

安装

import { createApp } from 'vue';
import { Dialog } from '@nutui/nutui';
const app = createApp();
app.use(Dialog);

函数调用

Dialog({
  title: '基础弹框',
  content: '支持函数调用和组件调用两种方式。'
});
Dialog({
  content: '无标题弹框'
});
Dialog({
  title: '提示弹框',
  content: '支持函数调用和组件调用两种方式。',
  noCancelBtn: true,
});

teleport 使用，挂载到指定节点

<nut-dialog teleport="#app" ... />

Dialog({
  teleport: '#app',
  ...
});
Dialog({
  teleport: '.demo',
  ...
});

函数调用 proxy.&dialog(…)

import { getCurrentInstance } from 'vue';
setup(){
  const { proxy } = getCurrentInstance();
  proxy.$dialog({
    title: '基础弹框',
    content: '支持函数调用和组件调用两种方式。'
  });
}

标签式组件使用

<nut-dialog :title="title" :close-on-click-overlay="false" :content="content" v-model:visible="visible"></nut-dialog>

import { ref } from 'vue';
import { Dialog } from '@nutui/nutui';
export default {
  setup() {
    const visible = ref(true);
    const title = '标签式使用';
    const content = '内容';
    return { visible,title,content };
  },
};

API

Props

Events

Slots