完美解决element-ui的el-input设置number类型后的相关问题

element-ui的el-input, 设置type="number"后,后边会多一个上下箭头,并且在中文输入法输入数据的时候,光标上移!!

前端的强迫症啊 (凭啥你这输入框和别人的不一样, 凭啥你光标就上移了, 你就不能正常点!!!)

so,解决一下

1. 解决掉上下箭头

::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  }
  ::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
  }

2. 解决掉光标上移问题

.el-input__inner {
  line-height: 1px !important;
}

elementui中el-input类型设置为number类型

当需要验证的字段是数字类型的时候,需要使用 v-model.number 来绑定,否则验证的时候会当做字符串处理,结果就无法验证

<el-input v-model.number="tax.salary"></el-input>

rules里面:

salary: [{required: true, message: '请输入工资',type:'number', trigger: 'blur'}],

到此这篇关于完美解决element-ui的el-input设置number类型后的相关问题的文章就介绍到这了,更多相关element-ui number类型内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • element-ui中el-input只输入数字(包括整数和小数)

    需求是: 输入框只能输入数字,包括整数和小数 发现网上大部分文章的处理方式: 通过正则来处理输入,对其合法性进行判断校验,再将提示信息反馈给用户.体验欠佳 输入完成后进行解析,将字符串转换为数字.会导致显示的值和真实值不一致 比对一下几种方案后,最终使用的是 el-input type="number" 优化实现 代码 App.vue <template> <div class=""> <h3>el-input</h3>

  • 完美解决element-ui的el-input设置number类型后的相关问题

    element-ui的el-input, 设置type="number"后,后边会多一个上下箭头,并且在中文输入法输入数据的时候,光标上移!! 前端的强迫症啊 (凭啥你这输入框和别人的不一样, 凭啥你光标就上移了, 你就不能正常点!!!) so,解决一下 1. 解决掉上下箭头 ::v-deep input::-webkit-outer-spin-button, ::v-deep input::-webkit-inner-spin-button { -webkit-appearance:

  • 解决element UI 自定义传参的问题

    如下所示: <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete> 这里的 hanleSelect 默认绑定的参数是选中的那条数据. 但是如果一个页面有好几个相同的组件,要想知道选中的是第几个

  • 解决element ui cascader 动态加载回显问题

    elementui是基于vue2.0的组件库,专为开发人员.设计人员而设计的:可以快速搭建项目框架,集成了界面样式,先给大家介绍下element ui cascader 动态加载回显问题解决方法. props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候,cascader却不显示了.只要重新加载下cascader组件就行. <el-cascader v-if="isShowAddressInfo&

  • 解决element ui select下拉框不回显数据问题的解决

    最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下: <el-select v-model=&quo

  • 完美解决input[type=number]无法显示非数字字符的问题

    在移动端webview实现的页面中,有数字的地方必须使用input type="number"类型的input,否则触发后的键盘为全键盘,而非数字键盘.但另外的一个问题是,input 为 type="number" 类型的无法显示非数字字符,比如:12/23中/. 只能采取另外的思路来解决,比如:显示的时候用非number类型的input或其它元素,当触发onfocus后,利用js 动态修改为number类型. <input class="pg-pa

  • 在vue+element ui框架里实现lodash的debounce防抖

    事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo

  • Vue前端整合Element Ui的教程详解

    目录 Vue前端整合Element Ui 1.安装Element Ui组件库 2.测试Element Ui是否整合成功 Vue前端整合Element Ui 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. Element Ui组件官网 1.安装Element Ui组件库 WIN+

  • 基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    目录 问题描述 实现效果 实现代码 问题描述 在开发时遇到一个数字区间输入框的需求,如下图: 项目使用的是vue,组件库用的是element UI,但是element UI并没有提供数字区间组件,只提供了InputNumber 计数器输入框,如果用两个计数器输入框进行拼接也能满足需求,但是样式调试起来太过于复杂且不够灵活,不能令人满意,并且该数字区间输入框在其它界面也有这种需求,于是就在element input输入框的基础上自行封装了一个数字区间组件使用. 实现效果 实现效果如下: 使用方式如

  • 解决Vue+Element ui开发中碰到的IE问题

    IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill

  • element ui的el-input-number修改数值失效的问题及解决

    目录 element ui的el-input-number修改数值失效 问题代码 解决办法 分析说明 官方资料 最新说明 el-input-number组件无法修改默认值为空 element ui的el-input-number修改数值失效 问题代码 目的:实现去掉小数位. <el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600&quo

随机推荐