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