uni-app 如何设置 怎么设置 easyinput只读 readonly

Question

uni-app 如何设置 怎么设置 easyinput设置只读 readonly，官方文档中有个disabled属性，但是设置为true之后这个输入框的所有事件就失效了，我想实现可以复制，但是不可以编辑的效果

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

针对你的问题，我建议你这样设置：

1.在easyinput标签中添加readonly属性，使其只读。

2.在样式表中添加如下样式：

input:read-only{
    color:black;
    background-color:#d4d4d4;
    cursor:not-allowed;
}

这样它就会有一个灰色背景，并且通过CSS禁用了它所有的鼠标和键盘事件。

因此，你可以复制其中的文本，但不能编辑其中的文本。

所以，最终的代码应该像这样：

<template>
  <div>
    <easyinput v-model="message" readonly></easyinput>
  </div>
</template>

<style scoped>
input:read-only{
    color:black;
    background-color:#d4d4d4;
    cursor:not-allowed;
}
</style>

<script>
export default {
  data() {
    return {
      message: "hello world"
    };
  }
};
</script>