Warning: session_start(): open(/var/lib/php/fpm/session/sess_hg2pege6pt17bi4d4qhbgn5nl9, O_RDWR) failed: Permission denied (13) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Vue Click Outside Directive - Bootstrap 4 & Material Design - Material Design for Bootstrap

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>
      

Step 4: If you wish to use the mousedown event instead of the default click, use :mousedown modifier:


          <template>
            <mdb-btn v-mdb-click-outside:mousedown="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>