vue-popper.js

vue-popper.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var Popper = require('popper.js');

module.exports = {

  props: {
    showPopper: {
      type: Boolean,
      required: false,
      default: false
    },
    placement: {
      type: String,
      required: false,
      default: 'top'
    },
    content: {
      type: String,
      required: false,
      default: ''
    },
    closeButton: {
      type: String,
      required: false,
      default: null
    }
  },

  data: function data() {
    return {
      popperId: null,
      popper: null
    };
  },
  ready: function ready() {
    var _this = this;

    console.log('this.$el', this.$el);
    this.$nextTick(function () {
      if (_this.showPopper) {
        _this.initPopper();
      }
    });
  },


  watch: {
    showPopper: function showPopper(val, oldVal) {
      var _this2 = this;

      if (!!this.showPopper) {
        this.$nextTick(function () {
          _this2.initPopper();
        });
      }
    }
  },

  destroyed: function destroyed() {
    this.destroyPopper();
  },


  methods: {
    initPopper: function initPopper() {
      this.popperId = this.uuid4();
      this.popper = new Popper(this.$el, this.$el.querySelector('.vue-popper-component'), {
        placement: this.placement || 'bottom',
        removeOnDestroy: true
      });
    },
    destroyPopper: function destroyPopper() {
      if (this.popper) {
        this.popper.destroy();
        this.popper = null;
      }
    },
    uuid4: function uuid4() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
            v = c === 'x' ? r : r & 0x3 | 0x8;
        return v.toString(16);
      });
    }
  }
};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div><span>123</span></div>"

},{"popper.js":"popper.js"}]},{},[1]);