vue3 怎么让input 不能修改也不能点击

在 Vue 3 中，如果你想阻止某个输入框被用户修改内容或点击，你可以通过设置一些属性和事件处理来实现。通常会结合 `v-model`、`disabled` 和 `@click.prevent` 属性来完成这个需求：

1. 首先，在模板（template）里，给 input 元素添加 `v-model` 和 `disabled` 属性：

   <input type="text" v-model="uneditableInput" :disabled="true">

2. 定义一个名为 `uneditableInput` 的数据属性，并将其初始值设为空字符串或你想保留的默认值：

   data() {
     return {
       uneditableInput: '',
     }
   }

3. 使用 `@click.prevent` 来阻止点击事件的默认行为：

   <input @click.prevent>

4. 如果你还想禁用键盘输入，可以在 `<script setup>` 中添加一个全局的 `keydown` 事件处理器：

   <script setup>
     const handleKeyDown = (event) => {
       if (event.key === 'Enter') { // 可选地限制特定键，如回车
         event.preventDefault(); // 阻止默认的按键动作
       }
     };

     window.addEventListener('keydown', handleKeyDown);
   </script>

当然，为了在组件卸载时移除监听，你应该在 `beforeUnmount` 或 `onBeforeUnmount` 生命周期钩子里移除该事件。