Click Outside

Vue Bootstrap 5 Click Outside

mdbClickOutside is a custom directive which allows watching clicks outside the container.

Basic usage

Import the directive from mdb-vue-ui-kit and add mdbClickOutside to the directives object. Now you can attach the directive to any html element or component. Check the console to see the result (F12).

<template>
  <div class="bg-black" v-mdb-click-outside="handleOutsideClick" style="width: 50px; height: 50px"></div>
</template>
<script>
  import { mdbClickOutside } from 'mdb-vue-ui-kit';

  export default {
    directives: {
      mdbClickOutside,
    },
    setup() {
      const handleOutsideClick = () => console.log('Clicked outside!');

      return {
        handleOutsideClick
      }
    }
  };
</script>
<script setup lang="ts">
  import { mdbClickOutside as vMdbClickOutside } from 'mdb-vue-ui-kit';

  const handleOutsideClick = () => console.log('Clicked outside!');
</script>

If you wish to use the mousedown event instead of the default click, use mousedown prop.

<template>
  <div class="bg-black" v-mdb-click-outside.mousedown="handleOutsideMousedown" style="width: 50px; height: 50px"></div>
</template>
<script>
  import { mdbClickOutside } from 'mdb-vue-ui-kit';

  export default {
    directives: {
      mdbClickOutside,
    },
    setup() {
      const handleOutsideMousedown = () => console.log('Mousedown outside!');

      return {
        handleOutsideMousedown
      }
    }
  };
</script>
<script setup lang="ts">
  import { mdbClickOutside as vMdbClickOutside } from 'mdb-vue-ui-kit';

  const handleOutsideMousedown = () => console.log('Mousedown outside!');
</script>

Click Outside - API

Import

<script>
  import { mdbClickOutside } from 'mdb-vue-ui-kit';
</script>

Properties

Property Type Default Description
mousedown Boolean false Change event from click to mousedown