vue 将表单设置成只读模式

最新推荐文章于 2024-06-04 14:11:26 发布
最新推荐文章于 2024-06-04 14:11:26 发布
阅读量1.4k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57305148/article/details/131064933
版权

方法一：设置 disabled
个人觉得 这个方法 页面虽然很明朗 但不美观 而且 如果表单很多的话 就得一个一个加 很麻烦

方法二：设置蒙版
用div包起来 提高层级 背景色可以不设置 也可以设置为透明色
但是缺点是 可能滚动条会滚动不了

方法三：通过css设置 pointer-events: none
去掉鼠标事件
这里有个问题就是 如果用 tab 键还是可以选中的

这个事件 也可以穿过该元素，点击到该元素下面的元素，比如 canvas这个按钮挡住了无法点击，按钮功能就无法实现，就可以设置 pointer-events: none；

屿-·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue 将整个表单设置为只读_elementUI 设置input的只读或禁用的方法
weixin_39531178的博客
12-19 1万+
只读：readonly在data里定义：readonly: true,然后在input框里加上readonly就可以了。禁用：disabled在data里定义：edit: true,然后在input框里加上：:disabled="edit"就可以了PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性通过 disabl...
vue2-form-loading:VueJS指令可与表单一起使用，以禁用提交按钮并使提交后的每个输入均为只读
05-11
vue2表单加载 VueJS指令可与表单一起使用，以禁用提交按钮并使提交后的每个输入均为只读 安装 npm install --save vue2-form-loading 用法 import Vue from 'vue' import formLoading from 'vue2-form-loading' Vue . use ( formLoading ) 基本形式 < form v-loading action =" ... " method =" post " > < input type =" text " name ="" value ="" > < input type =" submit " value =" Send " > </ form > 使用自定义加载文本 < form v-loading =" 'loading...' " action =" ..
vue 将整个表单设置为只读_把整个页面中的内容设置成只读，不可编辑
热门推荐
weixin_39844963的博客
12-19 1万+
方法一：比较先进的方法是在body体内加个div，设置其style的index值最大，比如9999，结合css和div技术可以实现当前页面上浮一个透明层，这样用户就不能操作了。poweredbyxty_zyn你也可以在这里插入图片你想注册地图名片吗http://mc.mapabc.comEMAIL:lipeng@mapabc.com地址邮编方法二：比较彻底的方法，是遍历所有表单元素将其dis...
Vue中的显示框/输入框设置为只读方式
TC0221的博客
05-30 362
此属性用于输入字段为只读，可防止用户对值进行修改，但仍可选中对话框文字。1）disabled=“disabled”：此方法可使输入框变灰色。样式：光标点击是不显示光标的！
vue2和vue3自定义指令实现只读模式，禁止用户编辑
最新发布
weixin_43601701的博客
06-04 421
你在工作时，是否遇到产品要求添加只读模式，需要大片的配置项都需要只读，代码层级深，改动内容多，全加上disable费事费力，期望简单的实现只读本文实现了一个只读指令，只需要在需要的地方加上v-read-only即可达到只读效果，快捷方便当前代码已经在使用中，效果良好。
Vue 定义只读数据 readonly
xiaowude_boke的博客
11-22 740
Vue 定义只读数据 readonly
vue 只读 :readOnly=“true“
Java&Develop的博客
07-23 240
vue 只读 :readOnly="true"
VUE3语法-(readonly的用法)将数据设置成只读模式
雾林小妖的博客
12-01 1850
vue中通过readonly设置数据只读
浅谈表单中的只读和禁用属性
12-14
表单中的只读和禁用属性 1. 只读：服务器方不希望用户修改数据，只是要求这些数据在表单中显示。例如注册或交易协议，商品价格等。 2. 禁用：只有满足某个条件后，才能使用某项功能。例如，只有用户同意注册协议后才允许单击”注册“按钮。播放器空间在播放状态不能再单击”播放“按钮等。  只读 通过readonly属性实现 禁用 通过disabled属性实现 例如 <textarea name=”text” rows=”10” cols=”30” readonly=”readonly”><!—此文档属性为只读–> （服务协议的具体内容）…..</textarea> <input type
Vuejs：使用v-bind绑定元素的只读属性
零小唬的博客
01-10 680
Vuejs：使用v-bind绑定元素的只读属性
HTML中Select不用Disabled实现ReadOnly的效果
09-06
Disabled ReadOnly之家的联系
elementUI 设置input的只读或禁用的方法
10-17
主要介绍了elementUI 设置input的只读或禁用的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue+element 模态框表格形式的可编辑表单实现
10-16
在初始化时，表单的字段可能是只读的，如示例中的`el-input`设置了`disabled`属性，使得用户无法直接编辑。当用户点击“编辑”按钮时，通过改变`isEdit`的状态，可以启用或禁用这些输入框。 在示例代码中，`el-form...
如何设置select只读不可编辑且select的值可传递
09-28
当属性设置为disabled时，提交表单时，select的值无法传递，提交前移除disabled属性就可以了
基于 ElementPlus 的表单只读态控件，完美适配所有表单组件支持 npm 与 cdn 方式的引入
04-03
当 `readOnly` 为真时，我们将这些组件设置为只读模式，禁用编辑功能；反之，如果 `readOnly` 为假，则允许编辑。 3. **适配所有表单组件**：为了确保组件能完美适配所有表单组件，我们需要在 `ReadOnlyFormItem` ...
Vue 3中readonly和shallowReadonly：设置只读数据更加易变和可维护
weixin_43263566的博客
10-02 1532
readonly 与 shallowReadonly （设置数据只读）
【AVUE】指定状态下表格为只读
SZnAl的博客
05-30 1067
1.在主页面设置 ，表格组件设置:disabled=“disabled” <business-apply-form-dialog-template v-if="procureFormVisible" :title="title" :visible="procureFormVisible" :option="procureFormDialogOption" @close="closeDialog"> <procure-form :disabled="disabled"
ant design vue 将表单设置为只读
06-03
要将 Ant Design Vue 表单设置为只读，你可以使用 `:disabled` 属性来禁用所有表单控件。例如，下面是一个只读的表单示例： ```vue <template> <a-form :model="formData" :disabled="true"> <a-form-item label="Name"> <a-input v-model="formData.name" /> </a-form-item> <a-form-item label="Email"> <a-input v-model="formData.email" /> </a-form-item> <a-form-item> <a-button type="primary" @click="submitForm">Submit</a-button> </a-form-item> </a-form> </template> <script> export default { data() { return { formData: { name: 'John', email: 'john@example.com' } }; }, methods: { submitForm() { // do something } } }; </script> ``` 在上面的示例中，我们将 `:disabled` 属性设置为 `true`，这将禁用表单中的所有控件，使其只读。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

屿-·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值