uni-app uni.showModal(OBJECT) 支持html和vue语法

在uni-app中，uni.showModal 方法通常用于显示一个模态对话框，它支持基本的文本内容，但原生并不直接支持HTML和Vue语法。然而，通过一些技巧，我们可以间接地实现类似效果。

由于uni.showModal不支持直接渲染HTML或Vue组件，我们可以使用uni.createSelectorQuery配合自定义组件的方式，在模态框显示后，动态地修改其内容。虽然这不是直接在uni.showModal中使用HTML或Vue，但可以达到类似的效果。

以下是一个示例，展示如何在模态框中动态插入HTML内容或Vue组件：

1. 创建一个自定义模态框组件（ModalComponent.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() {
      this.visible = true;
    },
    closeModal() {
      this.visible = false;
      this.$emit('close');
    }
  }
};
</script>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
}
</style>

1. 在页面中使用这个自定义模态框（Page.vue）：

<template>
  <view>
    <button @click="showCustomModal">显示模态框</button>
    <ModalComponent v-if="modalVisible" @close="modalVisible = false">
      <div>
        <h1>这是一个标题</h1>
        <p>这是一些<strong>HTML</strong>内容。</p>
        <!-- 你可以在这里插入任何Vue组件 -->
      </div>
    </ModalComponent>
  </view>
</template>

<script>
import ModalComponent from './ModalComponent.vue';

export default {
  components: {
    ModalComponent
  },
  data() {
    return {
      modalVisible: false
    };
  },
  methods: {
    showCustomModal() {
      this.$refs.modalComponent.showModal();
      this.modalVisible = true;
    }
  }
};
</script>

通过这种方式，我们可以绕过uni.showModal的限制，使用自定义组件来显示复杂的HTML或Vue内容。虽然这增加了代码的复杂性，但它提供了更大的灵活性。