官网地址
首先你需要安装 unplugin-vue-components
和 unplugin-auto-import
这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
npm install @element-plus/icons-vue
// 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.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()],
}),
],
}
<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 是用来匹配所有非数字内容的正则表达式,将之替换成空字符串,这种方式不会影响任何属性,推荐使用
<el-input v-model="aaa" οnkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >
<input type="text" onkeyup="value=value.replace(/^\D (\d (?:.\d{0,2})?). 1')" >
<input type="text" onkeyup="value=value.replace(/^\D (\d (?:.\d{0,1})?). 1')" >
<input type="text" onkeyup="value=value.replace(/[ \d]/g,'').replace(/ 0{1,}/g,'')" >
onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"
文章标题:ElementPlus自动按需引入以及限制表单输入数字
文章作者:未知用户
文章链接:[复制]
最后修改时间:2024年 05月 21日 09时48分
商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。 本文采用CC BY-NC-SA 4.0进行许可。
Copyright © 2023--2025
豫ICP备2022014268号-1
我们历经沧桑,这样错过了一生最好的时光,错过了便是永远