uniapp js统一弹出自定义组件

uni-app 是一款跨平台的开发框架，可以用于开发多种移动端应用。在 uni-app 的开发中，我们可以使用 JavaScript 语言统一弹出自定义组件。

首先，我们需要创建一个自定义组件，可以使用 Vue.js 的组件语法进行创建，例如：

<template>
  <div class="custom-component">
    <!-- 自定义组件的内容 -->
  </div>
</template>

<script>
export default {
  name: "CustomComponent",
  // 组件的方法和逻辑
}
</script>

<style>
.custom-component {
  /* 自定义组件的样式 */
}
</style>

在需要弹出自定义组件的页面或组件中，我们可以使用uni-app 提供的 `uni-popup` 组件来实现弹出自定义组件的效果。首先，需要引入自定义组件，然后在页面中使用 `uni-popup` 组件来包裹自定义组件，最后在需要弹出的时候通过改变 `uni-popup` 组件的 `show` 属性来控制组件的显示与隐藏。例如：

<template>
  <div>
    <!-- 其他页面内容 -->
    <uni-popup :show="isPopupShow">
      <custom-component></custom-component>
    </uni-popup>
    <!-- 其他页面内容 -->
  </div>
</template>

<script>
import UniPopup from "@/components/uni-popup.vue" // 引入uni-popup组件
import CustomComponent from "@/components/custom-component.vue" // 引入自定义组件

export default {
  components: {
    UniPopup,
    CustomComponent
  },
  data() {
    return {
      isPopupShow: false // 控制弹出框显示与隐藏的变量
    }
  },
  methods: {
    // 弹出自定义组件
    showPopup() {
      this.isPopupShow = true;
    },
    // 关闭自定义组件
    closePopup() {
      this.isPopupShow = false;
    }
  }
}
</script>

<style>
/* 页面样式 */
</style>

通过以上方式，我们可以使用 JavaScript 统一弹出自定义组件，具体的样式和逻辑可以根据实际需求进行定制。