app直播源码，弹出下拉框时可以点击任意区域关闭

1.实现原理

mounted：初始化页面完成后，再对html的dom节点进行一些需要的操作组件

添加点击事件监听document.addEventListener，假设点击区域不再该区域上，关闭弹框

2.实现代码

<template><br>  <div><br>    <div><br>      <div><br>        <div<br>          class="hd_sel flex-row j_b"<br>          @click="show_month = !show_month"<br>          ref="s1"<br>        ><br>          <div>{{ current_month }}</div><br>          <div<br>           <br>            :class="{ top: show_month, bot: !show_month }"<br>          ></div><br>        </div><br>      </div><br>      <div><br>        <div v-show="show_month"><br>          <div<br>           <br>            v-for="(item, index) in month_list"<br>            :class="{ drop_hd_ative: current_month == item.name }"<br>            :key="index"<br>            @click="choseItem(item, index)"<br>          ><br>            {{ item.name }}<br>          </div><br>        </div><br>      </div><br>    </div><br>  </div><br></template><br><script><br>export default {<br>  name: "dropItem",<br>  data() {<br>    return {<br>      current_month: "All",<br>      show_month: false,<br>      month_list: [<br>        {<br>          name: "All",<br>        },<br>        {<br>          name: "2022-1",<br>        },<br>        {<br>          name: "2022-2",<br>        },<br>      ],<br>    };<br>  },<br>  mounted() {<br>    document.addEventListener(<br>      "click",<br>      (e) => {<br>        let s1 = this.$refs.s1;<br>        if (!s1.contains(e.target)) {<br>          this.show_month = false;<br>        }<br>      },<br>      true<br>    );<br>  },<br>  methods: {<br>    choseItem(e) {<br>      this.current_month = e.name;<br>      this.show_month = false;<br>    },<br>  },<br>};<br></script><br><style scoped><br>.drop_hd_ative {<br>  <br>  color: #fff !important;<br>}<br>.drop_hd_item {<br>  line-height: 30px;<br>  color: #333;<br>}<br>.drop_hd {<br>  position: absolute;<br>  width: 200px;<br>  min-height: 30px;<br>  box-sizing: border-box;<br>  padding: 10px;<br>  background: #fff;<br>  left: 0;<br>  top: 3px;<br>  border-radius: 5px;<br>  z-index: 99;<br>  box-shadow: 5px 5px 5px #ccc;<br>  cursor: pointer;<br>}<br>.hd_e {<br>  position: relative;<br>}<br>.hd_sel {<br>  margin-top: 50px;<br>  min-width: 200px;<br>  height: 32px;<br>  background: rgba(243, 243, 243);<br>  border-radius: 8px;<br>  box-sizing: border-box;<br>  padding: 0 16px;<br>  font-size: 14px;<br>  font-weight: 500;<br>  position: relative;<br>  cursor: pointer;<br>}<br>.arrow {<br>  border-width: 6px;<br>  border-bottom: 0;<br>  border-color: #fff transparent transparent transparent;<br>  border-style: solid;<br>  width: 0;<br>  height: 0;<br>  transition: transform 0.3s;<br>  margin-left: 10px;<br>  &.bot {<br>    transform: rotate(0deg);<br>  }<br>  &.top {<br>    transform: rotate(-180deg);<br>  }<br>}<br></style>