web
mobile
Edit these docs Rate these docs

Vue Bootstrap Click Outside MDB Pro component

Vue Click Outside - Bootstrap 4 & Material Design

The mdb-click-outside is a custom directive which allows watching clicks outside the container.

Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'


        <script>
          import { mdbClickOutside } from "mdbvue";
        </script>
      

Step 2: Add mdbClickOutside to the directives object


        <script>
          import { mdbClickOutside } from "mdbvue";
          export default {
            directives: {
              mdbClickOutside
            }
          };
        </script>
      

Step 3: Attach the directive to any html element or component.


        <template>
          <mdb-btn v-mdb-click-outside="handleOutsideClick" color="success">Click outside me</mdb-btn>
        </template>
      

        <script>
          import { mdbBtn, mdbClickOutside } from "mdbvue";
          export default {
            components: {
              mdbBtn
            },
            directives: {
              mdbClickOutside
            },
            data() {
              return {
                outsideClicks: 0
              }
            },
            methods: {
              handleOutsideClick() {
                this.outsideClicks++;
              }
            }
          };
        </script>