利用uniapp实现弹窗提示功能

<template><div class="popup">    <div class="popup-title">{{ title }}</div>    <div class="popup-content">{{ content }}</div>    <div class="popup-buttons">      <button>确定</button>      <button>取消</button>    </div>    <div class="popup-close">关闭</div>  </div></template><script>export default {  props: {    title: {      type: String,      default: ''    },    content: {      type: String,      default: ''    }  },  methods: {    onConfirm() {      // 点击确定按钮的逻辑      this.$emit('confirm');    },    onCancel() {      // 点击取消按钮的逻辑      this.$emit('cancel');    },    onClose() {      // 关闭弹窗的逻辑      this.$emit('close');    }  }}</script><style>.popup {  /* 弹窗样式 */}.popup-title {  /* 弹窗标题样式 */}.popup-content {  /* 弹窗内容样式 */}.popup-buttons {  /* 弹窗按钮样式 */}.popup-close {  /* 弹窗关闭按钮样式 */}</style>

<template><div class="container">    <button>显示弹窗</button>    <popup :title="popupTitle" :content="popupContent" v-if="isPopupVisible"></popup></div></template><script>import popup from '@/components/popup.vue';export default {  components: {    popup  },  data() {    return {      isPopupVisible: false,      popupTitle: '弹窗标题',      popupContent: '弹窗内容'    }  },  methods: {    showPopup() {      this.isPopupVisible = true;    },    onConfirm() {      // 点击确定按钮后的逻辑      this.isPopupVisible = false;    },    onCancel() {      // 点击取消按钮后的逻辑      this.isPopupVisible = false;    },    onClose() {      // 点击关闭按钮后的逻辑      this.isPopupVisible = false;    }  }}</script><style>.container {  /* 容器样式 */}</style>