Bicorne

Appearance

Return to top
On this page

usePopup

介绍

使用 usePopup 展示不同状态的气泡或展示弹窗，使用者可以定义弹窗的标题和内容配置，并且能够在点击弹窗确认按钮后自行决定一些其他操作。

代码示例

基础用法

状态选择

处理 Promise 回调

自定义内容标题

特别提醒：

vue 2.7 版本以前的老项目要想激活离开当前页自动关闭弹窗的功能 需要：

  1. 额外安装 @vue/composition-api 包；
  2. 然后在setup函数中使用usePopup API。
sh
npm i @vue/composition-api -D
ts
import { usePopup } from '@bicorne/integrations';
import '@bicorne/integrations/dist/usePopup/style.css';

export default {
  props: {},
  data() {},
  setup() {
    const { createDialog } = usePopup();
    createDialog('实力的看法举例来说实力的看法举例来说');
  },
};

API

参数说明参数返回值
createMsg展示气泡弹窗（options: string ｜ defaultOptions, appointType?: string ｜ undefined）void｜Promise<void>
createMsg.success展示成功的气泡（options: string ｜ defaultOptions, appointType?: string ｜ undefined）void｜Promise<void>
createMsg.error展示失败的气泡（options: string ｜ defaultOptions, appointType?: string ｜ undefined）void｜Promise<void>
createMsg.warning展示警告的气泡（options: string ｜ defaultOptions, appointType?: string ｜ undefined）void｜Promise<void>
createDialog展示弹窗（options: string ｜ defaultOptions）void｜Promise<void>
closeDialog关闭弹窗()void