快捷導(dǎo)航

element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))

更新時間：2022年09月23日 11:18:05 作者：彭世瑜

開發(fā)中有時候需要input只能輸入數(shù)字,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

需求是：

輸入框只能輸入數(shù)字，包括整數(shù)和小數(shù)

發(fā)現(xiàn)網(wǎng)上大部分文章的處理方式：

通過正則來處理輸入，對其合法性進(jìn)行判斷校驗，再將提示信息反饋給用戶。體驗欠佳
輸入完成后進(jìn)行解析，將字符串轉(zhuǎn)換為數(shù)字。會導(dǎo)致顯示的值和真實值不一致

比對一下幾種方案后，最終使用的是 el-input type="number" 優(yōu)化實現(xiàn)

代碼 App.vue

<template>
  <div class="">
    
    <h3>el-input</h3>
    <el-input v-model="value1"></el-input>

    <h3>el-input v-model.number</h3>
    <el-input v-model.number="value2"></el-input>
    
    <h3>el-input-number</h3>
    <el-input-number v-model="value3"
      :controls="false"></el-input-number>

    <h3>el-input type="number"</h3>
    <el-input v-model="value4"
      type="number"></el-input>

    <h3>el-input type="number" 優(yōu)化</h3>
    <el-input v-model="value5"
      type="number"
      class="mo-input--number"></el-input>
  </div>
</template>

<script>
// created at 2022-06-02
export default {
  name: 'App',

  props: {},

  components: {},

  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
    };
  },

  computed: {},

  methods: {
    async getData() {},
  },

  created() {
    this.getData();
  },
};
</script>

<style lang="less">
/* 去掉右側(cè)上下箭頭  */
.mo-input--number {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }
}
</style>

<style lang="less" scoped>
</style>

依賴 package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "devDependencies": {
    "@vue/cli": "^5.0.4",
    "@vue/cli-service": "^5.0.4",
    "css-loader": "^6.7.1",
    "less": "^4.1.2",
    "less-loader": "^11.0.0",
    "style-loader": "^3.3.1",
    "vue-template-compiler": "^2.6.14"
  },
  "dependencies": {
    "element-ui": "^2.15.8",
    "vue": "2"
  }
}

入口文件 main.js

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";

Vue.use(ElementUI);

new Vue({
  el: "#app",
  render: (h) => h(App),
});

幾種方式對比

方式	效果
el-input	可以輸入數(shù)字，和字符串
el-input v-model.number	可以輸入數(shù)字，和字符串
el-input-number	可以輸入數(shù)字，和字符串
el-input type=“number”	僅能輸入數(shù)字（整數(shù)和小數(shù)）

總結(jié)

到此這篇關(guān)于element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))的文章就介紹到這了,更多相關(guān)element-ui el-input輸入數(shù)字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: