uni-app 全局modal弹窗插件

在uni-app中，创建一个全局的modal弹窗插件可以极大地方便我们在多个页面中复用弹窗功能。下面是一个简单的实现方法，包括插件的定义、注册和使用。

1. 创建插件文件

首先，在项目的components目录下创建一个名为GlobalModal.vue的文件。

<template>
  <view v-if="visible" class="modal-overlay">
    <view class="modal-content">
      <slot></slot>
      <button @click="closeModal">关闭</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    showModal(content) {
      this.visible = true;
      this.$slots.default = [content];
    },
    closeModal() {
      this.visible = false;
      this.$slots.default = [];
    }
  }
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  min-width: 300px;
}
</style>

2. 注册插件

在main.js中注册这个全局组件：

import Vue from 'vue';
import App from './App';
import GlobalModal from './components/GlobalModal.vue';

Vue.config.productionTip = false;

Vue.component('GlobalModal', GlobalModal);

App.mpType = 'app';

const app = new Vue({
    ...App
});
app.$mount();

3. 使用插件

在任意页面中使用这个全局modal弹窗插件：

<template>
  <view>
    <button @click="showCustomModal">显示自定义弹窗</button>
    <GlobalModal ref="globalModal"></GlobalModal>
  </view>
</template>

<script>
export default {
  methods: {
    showCustomModal() {
      const content = `
        <view>
          <text>这是一个自定义的弹窗内容</text>
        </view>
      `;
      this.$refs.globalModal.showModal(content);
    }
  }
};
</script>

总结

以上代码展示了如何在uni-app中创建一个全局的modal弹窗插件。通过定义组件、注册插件并在页面中使用，我们可以方便地在应用的任何地方调用这个弹窗功能。注意，这里使用了一个简单的字符串模板来传递内容，实际项目中可以根据需求传递更复杂的Vue组件结构。