vue包含计算器的高级数字输入 – vuetify-numeric

vue包含计算器的高级数字输入 – vuetify-numeric
插件名称 kolesnikovav
发布时间 2021年12月23日
插件作者 vuetify-numeric

vuetify-numeric 是一个用于Vuetifyjs的 Vue.js 组件,它有助于生成漂亮的、可定制的、多语言的数字输入字段,并集成了计算器。

安装和下载:

# Yarn
$ yarn add vuetify-numeric

# NPM
$ npm i vuetify-numeric

使用:

1.安装并导入vuetify-numeric。

import VNumeric from 'vuetify-numeric/vuetify-numeric.umd.min'

2.注册vuetify-numeric。

Vue.use(VNumeric);

3. 将组件添加到模板中。

<template>
  <v-numeric text outlined v-model="amount"></v-numeric>
</template>
export default {
  data() {
    return {
      amount: 10,
    };
  },
};

4. 可用的组件道具。

min: {
  type: Number,
  default: -Number.MAX_VALUE
},
max: {
  type: Number,
  default: Number.MAX_VALUE
},
length: {
  type: Number,
  default: 10
},
precision: {
  type: [Number, String],
  default: 0
},
negativeTextColor: {
  type: String,
  default: 'red'
},
textColor: {
  type: Function,
  default: undefined
},
locale: {
  type: String,
  default: 'en-US'
},
useGrouping: {
  type: Boolean,
  default: true
},
/* 自定义计算器 */
elevation: {
  type: Number,
  default: 0
},
fab: {
  type: Boolean,
  default: false
},
rounded: {
  type: Boolean,
  default: false
},
text: {
  type: Boolean,
  default: false
},
calcIcon: {
  type: String,
  default: 'mdi-calculator'
},
useCalculator: {
  type: Boolean,
  default: true
},
/* {
  fab: false,
  outlined: false,
  rounded: false,
  text: false,
  tile: false,
  large: false,
  small: false
}
*/
calcStyle: {
  type: Object,
  default: undefined
},