vue js正则只输入数字
vue-number-smarty (vue-number-smarty)
Number input with rich functionality for Vue.js.
Vue.js具有丰富功能的数字输入。
特征 (Features)
integer/float
整数/浮点数
signed/unsigned
签名/未签名
step size
一步的大小
increment/decrement value by scrolling when focused
聚焦时通过滚动增加/减少值
align variants
对齐变体
min and max boundaries
最小和最大边界
max length of integer part (only for float type)
整数部分的最大长度(仅适用于浮点型)
max length of float part (only for float type)
浮动部分的最大长度(仅适用于浮动类型)
max length of string
字符串的最大长度
error state
错误状态
readonly state
只读状态
theme options
主题选项
安装 (Installation)
npm i vue-number-smarty
or with yarn:
或与纱线:
yarn add vue-number-smarty
Then paste it in your main.js file:
然后将其粘贴到您的main.js文件中:
import VueNumberInput from 'vue-number-smarty';
Vue.use(VueNumberInput);
That's all!
就这样!
用法 (Usage)
道具 (Props)
align: {
required: false,
type: one of ['left', 'center', 'right', 'justify'],
default: 'left',
},
placeholder: {
required: false,
type: String,
default: 'Placeholder',
},
unsigned: {
required: false,
type: Boolean,
default: false,
},
numberType: {
required: true,
type: one of ['integer', 'float'],
},
minValue: {
required: false,
type: Number,
default: -9999999,
},
maxValue: {
required: false,
type: Number,
default: 9999999,
},
step: {
required: false,
type: Number,
default: 1,
},
/* only for integer | max length of string */
maxLen: {
required: false,
type: Number,
default: 6,
},
/* max length of string before float part */
intPartMaxLen: {
required: false,
type: Number,
default: 4,
},
/* max length of string after float part */
floatPartMaxLen: {
required: false,
type: Number,
default: 2,
},
error: {
required: false,
type: Boolean,
default: false,
},
readonly: {
required: false,
type: Boolean,
default: false,
},
<!-- border-bottom color -->
color: {
required: false,
type: String,
default: 'rgba(0,0,0,.4)',
},
<!-- text-color -->
textColor: {
required: false,
type: String,
default: 'rgba(0,0,0,.9)',
},
fontWeight: {
required: false,
type: String,
default: 'normal',
},
款式 (Styles)
Component styles are override-friendly. So you can configure the desired field style.
组件样式是优先于重写的。 因此,您可以配置所需的字段样式。
The css classes of the component are listed here:
此处列出了该组件的css类:
.vue-number-input__wrapper
.vue-number-input__input (.vue-number-input__input-error)
.vue-number-input__arrows-wrapper
.vue-number-input__arrow-up
.vue-number-input__arrow-down
项目设置 (Project setup)
yarn install || npm i
编译和热重装以进行开发 (Compiles and hot-reloads for development)
yarn serve || npm run serve
Go to /src/main.js and do it:
转到/src/main.js并执行以下操作:
// import VueNumberInput from 'vue-number-smarty';
import VueNumberInput from '@/plugin-src/main.js';
Now you can go to the root folder and type:
现在,您可以转到根文件夹并输入:
yarn serve || npm run serve
You can work with /src/plugin-src/NumberInput.vue and see it in your browser.
您可以使用/src/plugin-src/NumberInput.vue并在浏览器中查看它。
编译并最小化生产 (Compiles and minifies for production)
Go to /src/plugin-src/ and do:
转到/ src / plugin-src /并执行以下操作:
npx bili
Then go to /src/plugin-src/dist/main.js and at the end replace
然后转到/src/plugin-src/dist/main.js并最后替换
module.exports
with
与
export default
翻译自: https://vuejsexamples.com/number-input-with-rich-functionality-for-vue-js/
vue js正则只输入数字