wx.showModal转换成Vue3

在Vue 3中，你可以使用`<template>`模板和`<script>`脚本来实现类似于`wx.showModal`的功能。下面是一个简单的示例：

<template>
  <div>
    <button @click="showModal">显示模态框</button>
    <div v-if="show">
      <div>这是一个模态框</div>
      <button @click="closeModal">关闭模态框</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'YourComponent',
  setup() {
    const show = ref(false);

    const showModal = () => {
      show.value = true;
    };

    const closeModal = () => {
      show.value = false;
    };

    return {
      show,
      showModal,
      closeModal
    };
  }
};
</script>

在这个示例中，我们使用了`ref`函数来创建了一个名为`show`的响应式变量，它用于控制模态框的显示与隐藏。`showModal`方法用于显示模态框，而`closeModal`方法用于关闭模态框。

当点击“显示模态框”按钮时，`showModal`方法会将`show`变量的值设为`true`，从而显示模态框。模态框使用`v-if`指令根据`show`变量的值来决定是否显示。

当点击“关闭模态框”按钮时，`closeModal`方法会将`show`变量的值设为`false`，从而关闭模态框。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行更多的功能实现和样式调整。