<template>
  <div>
    <van-button @click="showDialog">打开对话框</van-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Dialog } from 'vant';

export default {
  components: {
    [Dialog.name]: Dialog,
  },
  setup() {
    const showDialog = () => {
      Dialog.alert({
        title: '提示',
        message: '这是一个对话框',
      });
    };

    return {
      showDialog,
    };
  },
};
</script>

<template>
  <div>
    <van-button @click="showToast">打开轻提示</van-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  components: {
    [Toast.name]: Toast,
  },
  setup() {
    const showToast = () => {
      Toast('这是一个轻提示');
    };

    return {
      showToast,
    };
  },
};
</script>

<template>
  <div>
    <van-button @click="showNotify">打开通知</van-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Notify } from 'vant';

export default {
  components: {
    [Notify.name]: Notify,
  },
  setup() {
    const showNotify = () => {
      Notify('这是一个通知');
    };

    return {
      showNotify,
    };
  },
};
</script>