uni-app 在vue3中如何使用 showModal模态框app端样式支持js调用

在uni-app中使用Vue 3时，可以通过调用uni-app提供的API来实现模态框（showModal）的显示，并自定义其样式。虽然uni-app本身并没有直接提供类似小程序的showModal API，但你可以通过自定义组件的方式来实现类似的功能，并且支持在JS中调用。

以下是一个简单的示例，展示如何在uni-app中使用Vue 3自定义一个模态框组件，并在JS中调用它。

1. 创建模态框组件

首先，在components目录下创建一个名为Modal.vue的组件。

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

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    show() {
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
      this.$emit('close');
    }
  }
};
</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;
  text-align: center;
}
</style>

2. 在页面中使用模态框组件

在你的页面（例如index.vue）中引入并使用这个模态框组件。

<template>
  <view>
    <button @click="openModal">打开模态框</button>
    <Modal ref="modal">
      <view>这是一个自定义模态框</view>
    </Modal>
  </view>
</template>

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

export default {
  components: {
    Modal
  },
  methods: {
    openModal() {
      this.$refs.modal.show();
    }
  }
};
</script>

3. 样式调整

你可以根据需求调整Modal.vue中的样式，以匹配你的应用风格。

通过这种方式，你可以在uni-app的Vue 3项目中实现一个自定义的模态框，并通过JS调用其显示和隐藏。这种方法的好处是你可以完全控制模态框的样式和行为，使其更符合你的应用需求。