target

Description

Optional. The DOM node that receives the content sent by the Portal component

Usage

target?: HTMLElement;

Example

<script setup>
  import { ref } from "vue";
  import { Modal, TextArea, Portal, Button } from "@svar-ui/vue-core";

  const custom = ref(false);
  const box = ref(null);
  function hideAll() {
    custom.value = false;
  }
</script>

<template>
  <Button @click="custom = !custom">Show Dialog</Button>

  <Portal v-if="custom" :target="box">
    <Modal>
      <TextArea placeholder="Some text" />
      <div style="margin-top: 20px;">
        <Button :onclick="hideAll">Yes</Button>
        <Button :onclick="hideAll">No</Button>
        <Button :onclick="hideAll">Maybe</Button>
      </div>
    </Modal>
  </Portal>
</template>

Related article: Setting the target