vue中 input disable后无法触发点击事件

在Vue中，当input元素被设置为disabled后，它不会触发点击事件。这是因为在HTML规范中，被禁用的表单元素不会接收用户的交互操作，也不会在表单提交时发送数据。

要解决这个问题，可以使用一个非disabled的元素来模拟input的外观，并在该元素上绑定点击事件。例如，你可以使用一个div或span元素，并使用CSS来模拟input的样式。

下面是一个简单的例子：

<template>
  <div class="input-container" @click="inputClicked">
    <!-- 模拟的input外观 -->
    <span class="input-content" :class="{'disabled': isDisabled}">
      {{ inputValue }}
    </span>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isDisabled: true,
      inputValue: '我是不可点击的输入'
    };
  },
  methods: {
    inputClicked() {
      if (this.isDisabled) {
        // 处理点击事件
        console.log('Input is disabled, cannot be clicked.');
      } else {
        // 处理非禁用状态下的点击事件
      }
    }
  }
};
</script>
 
<style>
.input-container {
  border: 1px solid #ccc;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
}
 
.input-content {
  border: none;
  background-color: transparent;
  padding: 5px;
  display: inline-block;
  cursor: not-allowed;
}
 
.disabled {
  color: grey;
  cursor: not-allowed;
}
</style>

在这个例子中，.input-container代表了input元素，并在其上绑定了点击事件inputClicked。.input-content代表了input的内容区域，通过:class="{'disabled': isDisabled}"动态地应用了一个模拟禁用状态的CSS类。当点击.input-container时，会检查input是否禁用，并相应地处理事件。