uview Dropdown多个下拉菜单重合，怎么写代码解决

下面是一个示例代码，展示如何使用uview的Dropdown组件，并避免多个下拉菜单重合的问题：

<!--index.vue-->
<template>
  <view>
    <view ref="dropdown1" @click="showDropdown1">点击我显示下拉菜单1</view>
    <view ref="dropdown2" @click="showDropdown2">点击我显示下拉菜单2</view>
    <u-dropdown :show.sync="showDropdown1" :position="dropdown1Position">
      <view>下拉菜单1</view>
    </u-dropdown>
    <u-dropdown :show.sync="showDropdown2" :position="dropdown2Position">
      <view>下拉菜单2</view>
    </u-dropdown>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showDropdown1: false,
        showDropdown2: false,
        dropdown1Position: {
          top: 0, // 相对于dropdown1元素的位置
          left: 0,
          position: 'absolute' // 相对定位
        },
        dropdown2Position: {
          top: 0, // 相对于dropdown2元素的位置
          left: 0,
          position: 'absolute' // 相对定位
        }
      }
    },
    methods: {
      showDropdown1() {
        this.showDropdown1 = true
        this.dropdown1Position = this.$refs.dropdown1.getBoundingClientRect() // 获取dropdown1元素的位置
        this.dropdown1Position.position = 'absolute'
      },
      showDropdown2() {
        this.showDropdown2 = true
        this.dropdown2Position = this.$refs.dropdown2.getBoundingClientRect() // 获取dropdown2元素的位置
        this.dropdown2Position.position = 'absolute'
      }
    }
  }
</script>

在上面的代码中，我们为每个Dropdown组件设置了不同的position属性，来避免它们重合。在点击Dropdown组件时，我们获取它对应的元素的位置，然后根据这个位置来设置对应的Dropdown组件的位置。这样每个Dropdown组件就可以按照自己的位置显示，并避免重合的问题。