消息弹窗

<template>
  <cb-button @click="showAlert">点击打开消息弹窗</cb-button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$cbAlert('这是一段内容', '标题名称');
    }
  }
}
</script>

<template>
  <cb-button @click="showConfirm">点击打开消息弹窗</cb-button>
</template>

<script>
export default {
  methods: {
    async showConfirm() {
      const { isOk } = await this.$cbConfirm('你确定要继续吗？', '提示');

      if (isOk) {
        this.$cbNotify.success('你按了确认~');
      }
      else {
        this.$cbNotify.success('你取消了~');
      }
    }
  }
}
</script>

<template>
  <cb-button @click="showPrompt">点击打开消息弹窗</cb-button>
</template>

<script>
export default {
  methods: {
    async showPrompt() {
      const { isOk, text } = await this.$cbPrompt('请输入昵称', '提示', {
        rules: { required: true }
      });

      if (isOk) {
        this.$cbNotify.success(`你按了确认~并输入了 ${text}`);
      }
      else {
        this.$cbNotify.success('你取消了~');
      }
    }
  }
}
</script>

<template>
  <cb-button @click="showPromptAsync">点击打开消息弹窗</cb-button>
</template>

<script>
export default {
  methods: {
    async showPromptAsync() {
      const { isOk, text } = await this.$cbPrompt('请输入昵称', '提示', {
        rules: { required: true },
        beforeClose({ isOk, text, button }) {
          if (isOk) {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve();
              }, 2000);
            });
          }
        }
      });

      if (isOk) {
        this.$cbNotify.success(`你按了确认~并输入了 ${text}`);
      }
      else {
        this.$cbNotify.success('你取消了~');
      }
    }
  }
}
</script>

<cb-button @click="$cbNotify.success('你按了按钮~')" v-cb-confirm>点击执行操作</cb-button>