ElementPlus自动按需引入以及限制表单输入数字

25 年 01 月 18日星期六 (已编辑)

作者：未知用户

日常生活

这篇文章最后修改于 2025年 01月 18日 19时10分部分内容可能已不适用如有疑问请联系作者.

按需引入elementPlus

自动导入

官网地址
首先你需要安装 unplugin-vue-components 和 unplugin-auto-import这两款插件

shell 复制代码

npm install -D unplugin-vue-components unplugin-auto-import

shell 复制代码

npm install @element-plus/icons-vue

使用vite

js 复制代码

// vite.config.ts
import { defineConfig } from vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

使用webpack

js 复制代码

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

使用

html 复制代码

<el-button
    :key="pageConfig.countDonwText"
    :type="info"
    text
    bg
    round
    :disabled="pageConfig.isDisableValidionCode"
    :loading="pageConfig.isLoadingValidionCode"
    @click="requestValidionCode"
    >
    {{ pageConfig.countDonwText }}
</el-button>

限制输入数字

方法一：

通过设置type属性：type="number"，这种方式一般会影响样式，不建议使用，如下图：

复制代码

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

方法二：

通过绑定值限制的方式：v-model.number="aaa",这种方式会限制一般的数字，但是会影响maxlengt属性，并且e是可以输入的，一般情况可以使用，严格限制的话不建议使用

复制代码

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

方法三：（建议使用）

通过对value值进行正则限制：οnkeyup="value=value.replace(/ $^\\d$ /g,' ')"，绑定一个onkeyup监听事件，/ $^\\d$ /g 是用来匹配所有非数字内容的正则表达式，将之替换成空字符串，这种方式不会影响任何属性，推荐使用

html 复制代码

<el-input v-model="aaa" οnkeyup="value=value.replace(/[^\d]/g,'')"></el-input>

只允许输入数字(整数：小数点不能输入)

html 复制代码

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >

允许输入小数(两位小数)

html 复制代码

<input type="text" onkeyup="value=value.replace(/^\D (\d (?:.\d{0,2})?). 1')" >

允许输入小数(一位小数)

html 复制代码

<input type="text" onkeyup="value=value.replace(/^\D (\d (?:.\d{0,1})?). 1')" >

开头不能为0，且不能输入小数

html 复制代码

<input type="text" onkeyup="value=value.replace(/[ \d]/g,'').replace(/ 0{1,}/g,'')" >

限制按键数字

html 复制代码

 onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"

阅读进度： 0 %

返回顶部

文章标题：ElementPlus自动按需引入以及限制表单输入数字

文章作者：未知用户

文章链接：[复制]

最后修改时间：2024年 05月 21日 09时48分

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。本文采用CC BY-NC-SA 4.0进行许可。

豫ICP备2022014268号-1

「每想拥抱你一次，天空飘落一片雪，至此雪花拥抱撒哈拉!」

本站已经艰难运行了620天