Vue

HTML

<script src="https://unpkg.com/focus-outside@0.5.0/lib/index.js"></script>

<div id="app">
  <span v-outside="outsideHandler"
    class="focus-button focus-outside-element"
    @click="isShowPopup = true">
    {{ buttonMsg }}
  </span>
  <div
    v-show="isShowPopup"
    v-outside="outsideHandler"
    class="focus-popup">
    点击按钮或popup之外收起 popup
  </div>
  <iframe src="//baidu.com" frameborder="0">
    
  </iframe>
</div>

SCSS

#app {
  position: relative;
  .focus-button {
    background: #f2f2f2;
  }
   
  .focus-popup {
    position: absolute;
    width: 200px;
    height: 300px;
    background: #ccc;
  }
  
  iframe {
    width: 100%;
    height: 300px;
    margin-top: 30px;
  }
  
  .focus-outside {
    outline: none;
  }
}

Vue

const { bind: focusBind, unbind: focusUnbind } = window.FocusOutside
console.log(FocusOutside)
const outside = {
	bind (el, binding) {
  	focusBind(el, binding.value)
  },
  
  unbind (el, binding) {
  	focusUnbind(el, binding.value)
  }
}

new Vue({
  el: "#app",
  
  directives: {
  	outside
  },
  
  data () {
  	return {
    	isShowPopup: false
    }
  },
  
  computed: {
  	buttonMsg ({ isShowPopup }) {
    	return isShowPopup ? '点击按钮或popup之外收起 popup' : '点击按钮显示 popup'
    }
  },
  
  methods: {
  	outsideHandler () {
    	this.isShowPopup = false
    }
  }
})
console.log(FocusOutside)