UniApp原生APP开发，自定义modal组件的实现方法是什么？

Question

RT，请问各位大大，现在用uniapp开发一款app, 比如我想自己写一个modal组件（只是举个例子，组件库没有），正常写web，只需要写一个mask以及modal自身容器内容，这就涉及到操作DOM元素。
而原生APP中好像并没有DOM这个概念，请问有什么办法吗？

Answer 1

用v-show/v-if

<template>
  <view class="custom-modal">
    <!-- 遮罩层 -->
    <view 
      class="mask" 
      v-show="visible" 
      @click="maskClick"
    ></view>
    
    <!-- modal内容 -->
    <view 
      class="modal-content"
      v-show="visible"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    maskClick() {
      if (this.maskClosable) {
        this.$emit('update:visible', false)
      }
    }
  }
}
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  z-index: 1000;
  width: 80%;
  padding: 20px;
}
</style>