uni-app picker组件内嵌input组件，当input组件disabled时，点击无法弹出picker（编译h5）

uni-app picker组件内嵌input组件，当input组件disabled时，点击无法弹出picker（编译h5）

示例代码：

        ···<picker mode="selector" :range="zhihang" @change="pickeChange">  
            <view class="inp">  
                <text>支行名称:</text>  
                <input  type="text" disabled name="zh" v-model="soga.zh" placeholder="请选择支行名称" />  
            </view>  
        </picker>···

操作步骤：

无

预期结果：

弹出picker

实际结果：

无效

bug描述：

picker组件内嵌input组件，当input组件disabled时，点击不好使，无法弹出picker【编译h5】


更多关于uni-app picker组件内嵌input组件，当input组件disabled时，点击无法弹出picker（编译h5）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

试试这个CSS行不行，我在Chrome内核版本116及以上，添加该配置后，可以触发点击事件了
// 兼容Chrome内核116及以上版本中配置disabled的input组件无法触发并冒泡click事件 .uni-input-input:disabled { pointer-events: none; }

更多关于uni-app picker组件内嵌input组件，当input组件disabled时，点击无法弹出picker（编译h5）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


管用，我的得加上deep /deep/ .uni-input-input:disabled { pointer-events: none; }

在 uni-app 中，picker 组件通常与 input 组件结合使用，以便用户点击 input 时弹出 picker 选择器。然而，当 input 组件被设置为 disabled 时，点击 input 不会触发 picker 的弹出事件，这是因为 disabled 的 input 元素不会响应点击事件。

解决方案

如果你希望在 input 被 disabled 的情况下仍然能够弹出 picker，可以考虑以下几种解决方案：

1. 使用 readonly 替代 disabled

readonly 属性会使 input 不可编辑，但仍然可以响应点击事件。因此，你可以将 input 的 disabled 属性替换为 readonly。

<template>
  <view>
    <picker mode="selector" :range="options" @change="onPickerChange">
      <input :value="selectedValue" placeholder="请选择" readonly />
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedValue: ''
    };
  },
  methods: {
    onPickerChange(e) {
      const index = e.detail.value;
      this.selectedValue = this.options[index];
    }
  }
};
</script>

2. 使用 cover-view 或 cover-image 覆盖 input

你可以使用 cover-view 或 cover-image 覆盖在 input 之上，并在 cover-view 上添加点击事件来触发 picker 的弹出。

<template>
  <view>
    <picker mode="selector" :range="options" @change="onPickerChange">
      <input :value="selectedValue" placeholder="请选择" disabled />
      <cover-view @click="openPicker">点击选择</cover-view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedValue: ''
    };
  },
  methods: {
    onPickerChange(e) {
      const index = e.detail.value;
      this.selectedValue = this.options[index];
    },
    openPicker() {
      // 这里可以手动触发 picker 的弹出
      // 例如，使用 uni.showActionSheet 或者其他方式
    }
  }
};
</script>

3. 使用 pointer-events CSS 属性

你可以通过 CSS 的 pointer-events 属性来控制 input 的点击事件。将 pointer-events 设置为 none 可以让 input 不响应点击事件，但 picker 仍然可以弹出。

<template>
  <view>
    <picker mode="selector" :range="options" @change="onPickerChange">
      <input :value="selectedValue" placeholder="请选择" style="pointer-events: none;" />
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedValue: ''
    };
  },
  methods: {
    onPickerChange(e) {
      const index = e.detail.value;
      this.selectedValue = this.options[index];
    }
  }
};
</script>
回到顶部