UniApp 小程序的全局弹窗：随处可用，不再重复引用！

前端

2023-10-15 09:03:00

UniApp 小程序的全局弹窗：跨页使用，极速开发

简介

作为 UniApp 小程序开发人员，您是否经常在每个页面中重复引用弹窗组件而感到头疼？UniApp 小程序的全局弹窗功能横空出世，让您轻松实现跨页使用，无需重复引用，大幅提升开发效率。

全局弹窗的优势

跨页调用： 全局弹窗可以跨越不同页面进行调用，在任何需要弹窗的页面中直接使用，告别重复引用。
代码简洁： 只需在主应用中一次引入全局弹窗，即可在所有页面中调用，让代码更加简洁易读。
减少冗余： 集中管理全局弹窗，消除重复代码，优化代码结构，提升程序性能。

全局弹窗的实现

声明和引用

全局组件需要放置在项目的 src/components 文件夹中，并在使用页面中通过组件名称进行引用。

具体实现

在 components/Popup.vue 中创建弹窗组件，定义样式和功能逻辑。
在需要使用弹窗的页面中，通过组件名称引用弹窗，例如：

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>
    <popup v-model="showPopup">
      <view slot="content">
        这是弹窗内容。
      </view>
    </popup>
  </view>
</template>

<script>
import Popup from '@/components/Popup.vue';

export default {
  components: {
    Popup,
  },
  data() {
    return {
      showPopup: false,
    };
  },
  methods: {
    showPopup() {
      this.showPopup = true;
    },
  },
};
</script>

使用 v-model 指令将弹窗状态与组件数据进行绑定。

示例

<template>
  <view>
    <button @click="showDialog">显示对话框</button>
    <dialog v-model="showDialog" title="提示">
      <view>
        这是一个对话框。
      </view>
      <view slot="footer">
        <button type="primary" @click="closeDialog">确定</button>
        <button type="default" @click="closeDialog">取消</button>
      </view>
    </dialog>
  </view>
</template>

<script>
import Dialog from '@/components/Dialog.vue';

export default {
  components: {
    Dialog,
  },
  data() {
    return {
      showDialog: false,
    };
  },
  methods: {
    showDialog() {
      this.showDialog = true;
    },
    closeDialog() {
      this.showDialog = false;
    },
  },
};
</script>