vue中实现点击除了自己之外点击页面任意地方将自身元素隐藏

2021-04-02

前言

项目需求：vue项目中需要实现自定义的选择下拉框。出现的问题是在当页面监听点击事件，别的页面也会监听到。这里需要监听click事件，并且销毁click这个事件。

html

<div class="platform-select" ref="platformBox">
        <div class="platform-name" @click="selectorToggle">
          <span>{{ title ? title : '请选择' }}</span>
          <i class="icon-platform" :class=" show ? 'icon-platform-down':'icon-platform-up'"></i>
        </div>
        <el-collapse-transition>
          <div class="platform-box clearfix" v-show="show">
            <el-row :gutter="20">
              <el-col :span="6" class="platform-item" :class="item.current ? 'active': ''" v-for="(item,index) in platformList" :key="index">
                <span @click="jumpPlatform(item.url)">{{item.name}}</span>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
</div>

注意：当页面监听了click事件，也要在这个页面销毁，并且后面要设置成true。

export default {
  name: "indexHeader",
  data() {
    return {
      platformList: [],
      title: '',
      show: false
    };
  },
  created() {
    this.getPlatform()
  },
  mounted() {
    //除了选择平台站点的元素以外，点击其它地方，关闭下拉框
    document.addEventListener('click',this.platformShow,true)
  },
  destroyed() {
    //需要销毁，不然别的页面也会受影响
    document.removeEventListener('click',this.platformShow,true)
  },
  methods: {
    platformShow(e){
      if(!this.$refs.platformBox.contains(e.target)){
        this.show = false;
      }
    },
    // 获取所有站点
    getPlatform(){
      protalApi.getPlatform().then((res) => {
        if (res.code == 200) {
          this.platformList = res.data;
          this.platformList.forEach(item => {
            if(item.current === 1){
              this.title = item.name
            }
          })

        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        console.log(err)
      });
    },
    selectorToggle: function(event){
      this.show = !this.show;
    },
    // 跳转到别的站点
    jumpPlatform(url){
      window.open(url, "_blank");
    }
  }
};

css

.platform-select{
      position: relative;
      float: left;
      padding-left: 24px;
      .platform-name{
        width: 114px;
        height: 40px;
        background: #D8D8D8 linear-gradient(90deg, #FFBD16 0%, #FF8F1F 100%);
        border-radius: 24px;
        margin: 29px 0;
        line-height: 40px;
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
        cursor: pointer;
        .icon-platform{
          display: inline-block;
          width: 10px;
          height: 6px;
          vertical-align: middle;
          margin-left: 8px;
          &.icon-platform-up{
            background: url('../../assets/images/icon_local_up.png') no-repeat;
            background-size: 10px 6px;
            margin-top: -3px;
          }
          &.icon-platform-down{
            background: url('../../assets/images/icon_local_down.png') no-repeat;
            background-size: 10px 6px;
          }
        }
      }
      .platform-box{
        position: absolute;
        left: 24px;
        top: 81px;
        /*width: 360px;*/
        width: 480px;
        background: #FFFFFF;
        box-shadow: 0px 6px 22px 0px rgba(104, 143, 171, 0.36);
        border-radius: 8px;
        z-index: 9;
        padding: 12px 24px;
        .platform-item{
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          text-align: center;
          cursor: pointer;
          span{
            width: 100%;
            display: inline-block;
            padding: 8px;
            margin: 4px 0;
            &:hover{
              background: #27A3FF;
              color: #FFFFFF;
            }
          }
          &.active{
            span{
              background: #27A3FF;
              color: #FFFFFF;
              border-radius: 2px;
            }
          }
        }
      }
    }