脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → element ui input

elementUI 设置input的只读或禁用的方法

 更新时间：2018年10月30日 14:27:46   投稿：mrr  
这篇文章主要介绍了elementUI 设置input的只读或禁用的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

只读：readonly

在data里定义：readonly: true,

然后在input框里加上readonly就可以了。

禁用：disabled

在data里定义：edit: true,

然后在input框里加上：:disabled="edit"就可以了

PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>通过 disabled 属性指定是否禁用 input 组件</title>
  <link rel="stylesheet" href="elementui/elementui.css" rel="external nofollow" >
</head>
<body>
  <div id="app">
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
       <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" auto-complete="off" :disabled="true" class="input"></el-input>
       </el-form-item>
       <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
         <el-option label="区域一" value="shanghai"></el-option>
         <el-option label="区域二" value="beijing"></el-option>
        </el-select>
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
       <el-button @click="dialogFormVisible = false">取 消</el-button>
       <el-button type="primary" @click="cancelAttr">确 定</el-button>
      </div>
     </el-dialog>
  </div>
  
</body>
<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="elementui/elementui.js"></script>
<script type="text/javascript">
 new Vue({
    el:'#app',
    data(){
      return{
        dialogFormVisible: true,
        form: {
         name: '',
         region: '',
         date1: '',
         date2: '',
         delivery: false,
         type: [],
         resource: '',
         desc: ''
        },
        formLabelWidth: '120px'
      }
    },
    mounted(){
     
    },
    methods:{
     
     //点击确定的时候取消属性
     cancelAttr(){
       //1.首先我们要拿到input的父class(input)
         //当我们设置disabled属性的时候，父集的class设置成 input el-input is-disabled，首先我们改变父集的class,把父集改成可编辑状态，才能修改input的属性
       const parent = document.querySelector(".input");
       parent.className = "input el-input ";//改变父集的class,把父集改成可编辑状态，
       //2.在设置input属性
         //获取input
       const input = document.querySelector(".input input");
         //设置input的属性为false
         input.disabled = false;
     }
    }
  })
</script>
</html>

elementui通过 disabled 属性指定是否禁用 input 组件，有时候我们会取消单个disabled 属性，那我们如何用DOM操作取消disabled 属性，下面是我走的一下弯路，供大家参考一下，避免再走这样的弯路

总结

以上所述是小编给大家介绍的elementUI 设置input的只读或禁用的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 网页禁用右键实现代码（JavaScript代码）

    网页禁用右键实现代码（JavaScript代码）

    网页禁用右键的代码，我们可以不少网站在使用，让别人复制什么的麻烦，但破解方法也比较简单。这里就不说了，如果想知道的可以参考脚本之家以前发布的文章。
    2009-10-10
  • JavaScript面向对象的程序设计(犯迷糊的小羊)

    JavaScript面向对象的程序设计(犯迷糊的小羊)

    这篇文章主要介绍了JavaScript面向对象的程序设计(犯迷糊的小羊),需要的朋友可以参考下
    2018-05-05
  • JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解

    JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解

    这篇文章主要介绍了JavaScript同步异步与作用域和闭包及原型和原型链，每个对象都连接到一个原型对象，并且它可以从中继承属性。所有通过对象字面量创建的对象都连接到object.prototype，它是JavaScript中的标配对象<BR>
    2022-07-07
  • js实现一个省市区三级联动选择框代码分享

    js实现一个省市区三级联动选择框代码分享

    省市区三级联动在填写表单时有关地址这一块显得尤为重要,直接提高了用户的填写速度与准确度，接下来本文使用js代码实现一个，感兴趣的你可以参考下希望可以帮助到你
    2013-03-03
  • JavaScript中函数的防抖与节流详解

    JavaScript中函数的防抖与节流详解

    这篇文章主要为大家详细介绍了JavaScript中函数的防抖与节流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • js中事件的处理与浏览器对象示例介绍

    js中事件的处理与浏览器对象示例介绍

    本文为大家详细介绍下js中关于简单事件的处理与浏览器对象，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-11-11
  • js调试工具Console命令详解

    js调试工具Console命令详解

    这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下
    2014-10-10
  • js不能获取隐藏的div的宽度只能先显示后获取

    js不能获取隐藏的div的宽度只能先显示后获取

    js不能获取隐藏div的的宽度，现在的办法是先将其显示出来，再获取其宽度，计算位置，下面的示例，大家可以参考下
    2014-09-09
  • 详解JavaScript中的类型判断与类型转换

    详解JavaScript中的类型判断与类型转换

    这篇文章主要给大家讲解一下JavaScript中的类型判断与类型转换的基本概念和使用方法,对我们的学习JavaScript的类型判断与转换有一定的帮助,需要的朋友可以参考下
    2023-07-07
  • js闭包实现按秒计数

    js闭包实现按秒计数

    闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话，因为他描述的太学术。其实这句话通俗的来说就是：JavaScript中所有的function都是一个闭包。
    2015-04-04

最新评论