0
ElementPlus自动按需引入以及限制表单输入数字
黄粱一梦2024-05-2115
按需引入elementPlus
自动导入
官网地址
首先你需要安装 unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
npm install @element-plus/icons-vue
使用vite
// 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
// 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')" >
- 开头不能为0，且不能输入小数
<input type="text" onkeyup="value=value.replace(/[ \d]/g,'').replace(/ 0{1,}/g,'')" >
- 限制按键数字
onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"
版权声明
本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~
Preview