Elementui

相关内容

Nuxt 3 Error TypeError: Cannot read properties of null (reading 'shapeFlag')

I encountered such an error when using Nuxt 3.8 :TypeError: Cannot read properties of null (reading 'shapeFlag')The error is a bit misleading to me, because I have defined a Dialog component which is also named Flag . I used Flag in two different pages, one of which was ok, but the other one threw out such an error. I tried to add ClientOnly to Flag , but the error was still there.I thought that the issue is my UI library. I am using ElementUI Plus, and my Flag component is indeed defined by wrapping ElDialog . Adding ClientOnly to ElDialog or renamed the file name of Flag to Flag.client.vue couldn't solve the error. Finally, I was able to solve this problem by using another UI library, i.e. PrimeVue.
2024-05-07 21:08:25

el-input 限制 只能输入数字,数字大小,长度,小数点后位数以及字母e的限制

通常情况下在使用elementUI前端框架的时候,经常会遇到表单要限制输入内容,尤其是数字。话不多说,代码如下: <el-input v-model="form.plan" type="number" step="0.5" min="0" max="5" @keyup.native="proving($event)" @input="editInput($event,'plan')" placeholder="最高5分" oninput="if(value>5)value=5;if(value<0)value=0" ></el-input>第一个属性:type=“number” input的原生属性,标明input框的类型第二个属性: step=“0.5” input的原生属性,type=“number” 时生效, 标明输入字段的合法数字间隔(假如 step=“0.5”,则合法数字应该是 -0.5、0、0.5、1,以此类推)第三个属性: min=“0” max=“5” min 属性规定输入字段所允许的最小值。 max 属性规定输入字段所允许的最大值。 min 属性与 max 属性配合使用,可创建合法值范围。第四个属性:@keyup.native="proving($event)"proving(e){ var val=e.target.value; //限制只能输入一个小数点 if (val.indexOf(".") != -1) { var str = val.substr(val.indexOf(".") + 1); if (str.indexOf(".") != -1) { val = val.substr(0, val.indexOf(".") + str.indexOf(".") + 1); } } e.target.value = val.replace(/[^\d^\.]+/g,''); },第五个属性:@input="editInput($event,‘plan’)"editInput(value, name) { this.form[name] = ("" + value) // 第一步:转成字符串 .replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉 .replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字 .replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全 .match(/^\d*(\.?\d{0,1})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数 },第六个属性: placeholder=“最高5分” 提示内容第七个属性:οninput="if(value>5)value=5;if(value<0)value=0"表示:如果输入内容大于5 ,就输出5 ,如果输入内容小于0 输出0elementUI中el-input输入数字且保留指定小数位<!-- 如果需要保留两位小数或者三位小数 只需要将 最后的 +2 改为 +3 即可 以此类推,保留几位小数就 几+1 --> <el-input type="text" placeholder="请输入保留一位小数的数字" v-model="userValue" oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" />因项目需要在此记录下此文章是我开发过程的一个记录,方便我日后学习和复盘。若能帮到你不胜荣幸。原文链接:https://blog.csdn.net/weixin_44835297/article/details/111253150
2024-08-29 20:58:47