uview Dropdown编写多个下拉菜单，代码实现

好的，下面是一个简单的 uview Dropdown 组件实现多个下拉菜单的代码示例：

<template>
  <view>
    <u-dropdown :list="list1" @change="onChange1">下拉菜单1</u-dropdown>
    <u-dropdown :list="list2" @change="onChange2">下拉菜单2</u-dropdown>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list1: ['选项1', '选项2', '选项3'],
      list2: ['选项A', '选项B', '选项C'],
    }
  },
  methods: {
    onChange1(index) {
      console.log('下拉菜单1选中了第' + index + '个选项')
    },
    onChange2(index) {
      console.log('下拉菜单2选中了第' + index + '个选项')
    },
  },
}
</script>

这里定义了两个 uview Dropdown 组件，分别绑定了不同的选项列表和选项改变的事件处理函数。当用户选择某个选项时，组件会触发对应的 `change` 事件并传递该选项在列表中的索引。在事件处理函数中，可以根据索引值进行相应的操作。

相关问题

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组件就可以按照自己的位置显示，并避免重合的问题。

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

如果uview Dropdown多个下拉菜单数据重合一起，可能是因为你没有正确设置它们的数据源。Dropdown组件的数据源是一个数组，每个元素代表一个下拉选项。如果你在多个地方使用Dropdown组件，并且它们的数据源相同，那么它们显示的内容就会重合在一起。

为了避免这个问题，你可以为每个Dropdown组件设置不同的数据源，或者为它们的数据源添加不同的标识符，来区分它们的数据。

下面是一个示例代码，展示如何为多个Dropdown组件设置不同的数据源，来避免数据重合的问题：

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

<script>
  export default {
    data() {
      return {
        showDropdown1: false,
        showDropdown2: false,
        dropdown1List: [
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' },
          { value: '3', label: '选项3' }
        ],
        dropdown2List: [
          { value: '4', label: '选项4' },
          { value: '5', label: '选项5' },
          { value: '6', label: '选项6' }
        ]
      }
    },
    methods: {
      showDropdown1() {
        this.showDropdown1 = true
      },
      showDropdown2() {
        this.showDropdown2 = true
      }
    }
  }
</script>

在上面的代码中，我们为每个Dropdown组件设置了不同的数据源，来避免它们的数据重合在一起。这样每个Dropdown组件就可以显示自己的数据，而不会重合在一起。