iview Dropdown嵌套Tabs，切换tab不关闭Dropdown

<Dropdown
      :transfer="true"
      :visible="visible"
      trigger="custom"
      class="message"
      id="dropdown-mes"
      placement="bottom-end"
    >
      <a href="javascript:void(0)" style="color: #fff">
        <Badge :count="total" style="vertical-align: text-bottom">
          <Icon class="message-icon" @click="openMessage" type="ios-email-outline"></Icon>
        </Badge>
      </a>
      <DropdownMenu slot="list" class="dropdownMenu" style="position: relative">
        <Tabs id="dropdown-tab" class="dropdown-tab" value="name1" @on-click="tabClick">
          <!-- 通知 -->
          <TabPane :label="label1" name="name1">
            <div class="tab-content">
              .....
            </div>
            <div class="message-footer">
              <div class="message-btn clear-message" @click="clear(0)">清空通知</div>
              <div class="message-btn more-message" @click="more(0)">查看更多</div>
            </div>
          </TabPane>
          <TabPane :label="label2" name="name2">
           ...
          </TabPane>
          <TabPane :label="label3" name="name3">标签三的内容</TabPane>
        </Tabs>
    </DropdownMenu>
</Dropdown>

created() {
    document.addEventListener("click", (e) => {
      let dropdownTab = document.getElementById("dropdown-mes");
      let tabBox = document.getElementById("dropdown-tab");
      // 点击除div以外的
      if (!dropdownTab.contains(e.target) && !tabBox.contains(e.target)) {
        this.visible = false;
      }
    });
}
openMessage() {
      this.visible = true;
},