uni-app 点击查找文件类型按钮后鼠标移出按钮范围下拉框消失

在 uni-app 中，如果你希望在点击按钮后显示一个下拉框，并且当鼠标移出按钮范围时下拉框消失，你可以通过以下步骤实现：

1. 使用 v-show 或 v-if 控制下拉框的显示与隐藏

你可以使用 v-show 或 v-if 来控制下拉框的显示与隐藏。v-show 是通过 CSS 控制元素的显示与隐藏，而 v-if 是通过 DOM 的添加与移除来控制。

2. 监听按钮的点击事件和鼠标移出事件

你需要在按钮上监听点击事件，并在点击时显示下拉框。同时，监听鼠标移出按钮范围的事件，并在鼠标移出时隐藏下拉框。

3. 示例代码

以下是一个简单的示例代码：

<template>
  <view>
    <!-- 按钮 -->
    <button @click="toggleDropdown" @mouseleave="hideDropdown">查找文件类型</button>
    
    <!-- 下拉框 -->
    <view v-show="isDropdownVisible" class="dropdown">
      <view>文件类型1</view>
      <view>文件类型2</view>
      <view>文件类型3</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDropdownVisible: false // 控制下拉框的显示与隐藏
    };
  },
  methods: {
    // 切换下拉框的显示与隐藏
    toggleDropdown() {
      this.isDropdownVisible = !this.isDropdownVisible;
    },
    // 隐藏下拉框
    hideDropdown() {
      this.isDropdownVisible = false;
    }
  }
};
</script>

<style>
.dropdown {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}
</style>

4. 解释

• 按钮：按钮上绑定了 @click 事件和 @mouseleave 事件。@click 事件用于切换下拉框的显示与隐藏，@mouseleave 事件用于在鼠标移出按钮范围时隐藏下拉框。
• 下拉框：使用 v-show 控制下拉框的显示与隐藏。isDropdownVisible 是一个布尔值，用于控制下拉框的显示状态。
• 样式：简单的样式用于美化下拉框。

5. 注意事项

• 如果你希望下拉框在鼠标移出下拉框本身时也隐藏，可以在下拉框上添加 @mouseleave 事件。
• 如果你希望下拉框在点击页面其他区域时隐藏，可以使用 @click.away 事件（需要引入额外的库或自定义指令）。

6. 扩展

如果你希望下拉框在点击页面其他区域时隐藏，可以使用以下方法：

<template>
  <view>
    <!-- 按钮 -->
    <button @click="toggleDropdown">查找文件类型</button>
    
    <!-- 下拉框 -->
    <view v-show="isDropdownVisible" class="dropdown" @click.stop>
      <view>文件类型1</view>
      <view>文件类型2</view>
      <view>文件类型3</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDropdownVisible: false
    };
  },
  methods: {
    toggleDropdown() {
      this.isDropdownVisible = !this.isDropdownVisible;
    },
    hideDropdown() {
      this.isDropdownVisible = false;
    }
  },
  mounted() {
    // 监听页面点击事件
    document.addEventListener('click', this.hideDropdown);
  },
  beforeDestroy() {
    // 移除事件监听
    document.removeEventListener('click', this.hideDropdown);
  }
};
</script>

<style>
.dropdown {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}
</style>