uniapp u-input 的 click 事件不生效?我来教你解决办法

2023-08-31 07:41:46

Uniapp U-Input Click 事件失效？别慌，我来教你如何解决！

简介

在使用 Uniapp 开发移动端应用时，我们经常会遇到需要使用 u-input 标签输入文本的情况。然而，当我们为 u-input 设置 readonly 属性后，在 H5 谷歌浏览器下，其 click 事件会失效。这可能是由于兼容性差异造成的。为了解决这个问题，本文将介绍几种可行的解决方案。

解决方案

方法 1：使用 U-Input 标签并设置 Readonly 属性

<template>
  <u-input readonly @click="handleInputClick" />
</template>

<script>
export default {
  methods: {
    handleInputClick() {
      // 处理点击事件
    }
  }
};
</script>

方法 2：在 U-Input 标签中添加 Disabled 属性

<template>
  <u-input :disabled="true" @click="handleInputClick" />
</template>

<script>
export default {
  methods: {
    handleInputClick() {
      // 处理点击事件
    }
  }
};
</script>

方法 3：将 U-Input 标签的 Pointer-Events 属性设置为 None

<template>
  <u-input style="pointer-events: none" @click="handleInputClick" />
</template>

<script>
export default {
  methods: {
    handleInputClick() {
      // 处理点击事件
    }
  }
};
</script>

方法 4：在 U-Input 标签的父元素上添加 Pointer-Events 属性并设置为 Auto

<template>
  <view style="pointer-events: auto">
    <u-input @click="handleInputClick" />
  </view>
</template>

<script>
export default {
  methods: {
    handleInputClick() {
      // 处理点击事件
    }
  }
};
</script>