uniapp 自定义弹窗组件

在UniApp中，如果你想自定义一个弹窗（modal）组件，可以按照以下步骤操作：

1. **创建组件**:
- 在`components`目录下新建一个文件夹，比如`custom-dialogs`，然后创建一个新的Vue组件文件，例如`CustomModal.vue`。

   <!-- CustomModal.vue -->
   <template>
     <view class="custom-modal">
       <header slot="header">自定义标题</header>
       <div slot="content">{{ customMessage }}</div>
       <button slot="footer" @click="close">关闭</button>
     </view>
   </template>

   <script>
   export default {
     name: "CustomModal",
     data() {
       return {
         customMessage: "这是自定义内容",
       };
     },
     methods: {
       close() {
         this.$emit("close"); // 当点击关闭按钮时，触发close事件
       },
     },
   };
   </script>

   <style scoped>
   .custom-modal {
     /* 添加自定义样式 */
     width: 400px;
     padding: 20px;
     background-color: rgba(0, 0, 0, 0.8);
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 5px;
   }
   </style>

2. **在其他页面使用**:
- 在需要用到自定义弹窗的地方，通过`<custom-modal>`标签引入并传递数据：

     <template>
       <view>
         <button @click="openCustomModal">打开自定义弹窗</button>
         <custom-modal v-if="isShowing" :message="customMessage" @close="closeCustomModal"></custom-modal>
       </view>
     </template>

     <script>
     import CustomModal from '@/components/custom-dialogs/CustomModal.vue';

     export default {
       components: {
         CustomModal,
       },
       data() {
         return {
           isShowing: false,
           customMessage: '',
         };
       },
       methods: {
         openCustomModal() {
           this.isShowing = true;
           // 可以在这里设置初始内容
           this.customMessage = "这是初始自定义消息";
         },
         closeCustomModal() {
           this.isShowing = false;
         },
       },
     };
     </script>

3. **注册组件** (可选，如果要在所有页面通用):
- 在`main.js`或其他适当位置注册这个组件，以便在整个项目中使用：

     Vue.component('custom-modal', require('@/components/custom-dialogs/CustomModal.vue'));