uni-app 安卓14下拉菜单不兼容问题 disable设置后下拉菜单无法弹出开放disable内容变得可编辑

信息类别	详细信息
产品分类	uniapp/App
PC开发环境	Windows
PC版本号	win10
HBuilderX	正式
HBuilderX版本号	4.11
手机系统	Android
手机系统版本号	Android 14
手机厂商	OPPO
手机机型	一加3
页面类型	vue
vue版本	vue2
打包方式	离线
项目创建方式	HBuilderX

操作步骤：

下拉菜单组件设置disable

预期结果：

可正常弹出选择框，且无法编辑所选内容

实际结果：

无法弹出选择框

bug描述：

下拉菜单组件

更多关于uni-app 安卓14下拉菜单不兼容问题 disable设置后下拉菜单无法弹出开放disable内容变得可编辑的实战教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 1楼

在 uni-app 中，如果你在 Android 14 上遇到下拉菜单不兼容的问题，特别是当 disable 设置后下拉菜单无法弹出，或者开放 disable 后内容变得可编辑的问题，可以通过以下几种方式来解决或绕过这个问题：

1. 检查 `disable` 属性的使用

确保你正确地使用了 disable 属性。disable 属性通常用于禁用某些交互元素，但可能会导致某些组件无法正常弹出下拉菜单。你可以尝试移除 disable 属性，看看问题是否仍然存在。

2. 使用 `readonly` 替代 `disable`

如果你希望内容不可编辑但仍然可以弹出下拉菜单，可以尝试使用 readonly 属性代替 disable。readonly 属性通常用于输入框等元素，使其内容不可编辑，但不会影响其他交互行为。

<input type="text" readonly />

3. 动态控制 `disable` 状态

如果你需要在某些条件下禁用下拉菜单，但在其他条件下允许弹出，可以动态控制 disable 状态。例如，使用 v-if 或 v-show 来动态渲染组件。

<template>
  <div>
    <select v-if="!isDisabled">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
    <select v-else disabled>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: false
    };
  }
};
</script>

4. 使用自定义下拉菜单组件

如果原生下拉菜单组件在 Android 14 上存在问题，可以考虑使用自定义下拉菜单组件。你可以使用 uni-popup 或其他第三方组件库来实现自定义下拉菜单。

<template>
  <div>
    <button @click="showPopup = true">Open Dropdown</button>
    <uni-popup v-model="showPopup">
      <div>
        <div @click="selectOption(1)">Option 1</div>
        <div @click="selectOption(2)">Option 2</div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  },
  methods: {
    selectOption(value) {
      console.log('Selected:', value);
      this.showPopup = false;
    }
  }
};
</script>

uni-app 安卓14下拉菜单不兼容问题 disable设置后下拉菜单无法弹出 开放disable内容变得可编辑