uni-app ios系统 textarea组件的disabled属性动态设置时不生效

在 Uni-App 中，textarea 组件的 disabled 属性在 iOS 系统上动态设置时可能会遇到不生效的问题。这个问题可能与 iOS 系统对 textarea 组件的处理方式有关。以下是一些可能的解决方案：

1. 使用 v-if 替代 disabled

如果 disabled 属性动态设置不生效，可以尝试使用 v-if 来控制 textarea 的显示和隐藏，而不是使用 disabled 属性。

<template>
  <textarea v-if="!isDisabled" v-model="inputValue"></textarea>
  <textarea v-else v-model="inputValue" disabled></textarea>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isDisabled: false
    };
  },
  methods: {
    toggleDisabled() {
      this.isDisabled = !this.isDisabled;
    }
  }
};
</script>

2. 使用 readonly 属性

如果 disabled 属性不生效，可以尝试使用 readonly 属性来达到类似的效果。

<template>
  <textarea :readonly="isDisabled" v-model="inputValue"></textarea>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isDisabled: false
    };
  },
  methods: {
    toggleDisabled() {
      this.isDisabled = !this.isDisabled;
    }
  }
};
</script>

3. 强制重新渲染组件

有时，强制重新渲染组件可以解决问题。你可以通过给 textarea 组件添加一个 key 属性，并在 disabled 状态改变时更新 key 的值来强制重新渲染组件。

<template>
  <textarea :key="textareaKey" :disabled="isDisabled" v-model="inputValue"></textarea>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isDisabled: false,
      textareaKey: 0
    };
  },
  methods: {
    toggleDisabled() {
      this.isDisabled = !this.isDisabled;
      this.textareaKey += 1; // 强制重新渲染
    }
  }
};
</script>

4. 使用原生 JavaScript 操作

如果以上方法都不奏效，可以尝试使用原生 JavaScript 直接操作 DOM 元素的 disabled 属性。

<template>
  <textarea ref="myTextarea" v-model="inputValue"></textarea>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isDisabled: false
    };
  },
  methods: {
    toggleDisabled() {
      this.isDisabled = !this.isDisabled;
      this.$refs.myTextarea.disabled = this.isDisabled;
    }
  }
};
</script>