美文网首页
el-input 开发常见使用

el-input 开发常见使用

作者: _悟_空 | 来源:发表于2021-04-25 18:15 被阅读0次

纯数字且首数字不能为0

 <el-input
  maxlength="20"
  v-model="ruleForm.renew_amount"
  placeholder="请输入金额"
  oninput="value=value.replace(/\D/g, '').replace(/^0{1,}/g, '')"   // 只能输入数字
></el-input>

输入文本

 <el-input
 maxlength="20"
  v-model="ruleForm.renew_amount"
  placeholder="请输入文本"
  rows="15"
  type="textarea"
></el-input>

去除所有空格

// 1.在main.js中加入Vue的原型方法
// 去除空格
Vue.prototype.validSpace = function (value) {
  value = value.replace(/\s/g, "");
  return value;
}

// 2.在el-input中使用
<el-input
 :value="from.name"
 @input="(e) => (from.name = validSpace(e))"
></el-input>

去除特殊字符

  // 数据类型
  return {
    treeForm:{
        son_name:""
    },
    serchText:""
  }
  
  // 使用方法  单个字段
  <el-input 
    maxlength="20" 
    v-model.trim="serchText"   
    @keyup.native="trimLR('serchText')">
  </el-input>

   trimLR(val) {
      this[val] = this[val].replace(/\s+/g, "");
   },

  // 使用方法  对象字段 2
   <el-input 
    maxlength="20" 
    v-model.trim="treeForm.son_name"   
    @keyup.native="trimLR('treeForm','son_name')">
   </el-input>

   trimLR(val,val1) {
    this[val][val1] = this[val][val1].replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g, '').replace(/\s/g, '');
   }

相关文章

网友评论

      本文标题:el-input 开发常见使用

      本文链接:https://www.haomeiwen.com/subject/fhfjrltx.html