vue点击容器外隐藏元素（点击非本身以外的部分隐藏元素）

如图点击蓝色边框以外任意地方隐藏蓝色边框容器（不使用输入框的失焦事件）

实现思路：

获取到dom节点然后通过其contains方法来判断点击的地方是否为其子元素或其本身

原生js获取dom跟vue的$el都可以实现

也可以通过vue的this.$refs.showBoxRef.$el.contains()

注意事项：

1.如果不是在非必要的情况下可以使用v-show，这样就不会有dom渲染先后顺序的问题

2.记得在添加事件的时候传第三个参数阻止冒泡，不然点击本身的时候也会触发事件导致其无法显示，也可以在显示事件添加.stop来阻止冒泡

3.添加完事件记得要移除事件

4.一定主要注意在获取dom的时候看dom有没有渲染，不要在mounted之前的生命周期操作dom以及v-if值为false的元素

5.不要直接使用this.$refs['refName']否则就会报下面的错,

 Uncaught TypeError: this.$refs.showBoxRef.contains is not a function
 at VueComponent.isClick

mounted中的打印值：