Vue Composable Utils

# ✨ useModal

The useModal () function is used to return a copy of the filtered object using the given key value. This function provides the desired condition by specifying which properties are selected from the object.

# 🍁 Usage

The example usage of useModal function is shown below.

import { useModal } from 'vue-composable-utils';
const { visible, setVisible, current, openModal, closeModal } = useModal();

  
        Copied!

# 🚀 Features

useModal takes two parameters.

Parameter Description
Object The object to be processed.
Keys Optional. The key value that should be selected.

# 💐 Example

You can see how it changes reactively using the example below.

<template>
  <div class="modal-vue">
    <!-- button show -->
    <button class="btn yellow" @click="handleButton">show</button>

    <!-- overlay -->
    <div class="overlay" v-if="visible"></div>

    <!-- modal -->
    <div class="modal" v-if="visible">
      <div class="modal-header">Modal Header</div>
      <button class="close" @click="closeModal">x</button>
      <div class="modal-content" v-for="curr in current" :key="curr.id">
        <ul>
          <li>
            <p>{{ curr.emoji }}</p>
            <h1>{{ curr.fullname }}</h1>
            <span>{{ curr.job }}</span>
          </li>
        </ul>
      </div>
      <div class="modal-footer">Modal Footer</div>
    </div>
  </div>
</template>

  
        Copied!

← useDarkMode →