[Fix] Issue of prefix with decimal

Author: dipaksarkar

docs/.vuepress/components/PlayGround.vue

@@ -4,6 +4,7 @@
       <div class="grid">
         <div class="font-medium mb-2">Component</div>
         <number
+          v-if="updated"
           v-model="price"
           v-bind="config"
           class="shadow-sm rounded-md text-base transition-all disabled:cursor-not-allowed disabled:border-gray-300 disabled:text-gray-300 focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50"

src/directive.js

@@ -17,6 +17,7 @@ export default {
     el = core.getInputElement(el)
     const option = el[CONFIG_KEY]
     const { config } = option
+
     // prefer adding event listener to parent element to avoid Firefox bug which does not
     // execute `useCapture: true` event handlers before non-capturing event handlers
     const handlerOwner = el.parentElement || el
@@ -36,9 +37,12 @@ export default {
     // check decimal key and insert to current element
     // updated cursor position after format the value
     el.onkeydown = (e) => {
+      const { target } = e
+      const regExp = new RegExp(`${config.prefix}|${config.suffix}`, 'g')
+      let newValue = target.value.replace(regExp, '')
       if (
         ([110, 190].includes(e.keyCode) || e.key === config.decimal) &&
-        el.value.includes(config.decimal)
+        newValue.includes(config.decimal)
       ) {
         e.preventDefault()
       } else if ([8].includes(e.keyCode)) {
@@ -72,9 +76,9 @@ export default {
 
   updated: (el, { value, oldValue, modifiers }, vnode) => {
     el = core.getInputElement(el)
+    const { config } = el[CONFIG_KEY]
+    el[CONFIG_KEY].config = Object.assign({}, config, value, modifiers)
     if (value !== oldValue) {
-      const { config } = el[CONFIG_KEY]
-      el[CONFIG_KEY].config = Object.assign({}, config, value, modifiers)
       core.updateValue(el, vnode, { force: true, clean: true })
     } else {
       core.updateValue(el, vnode)

src/number-format.js

@@ -10,11 +10,18 @@ export default function NumberFormat(config = options) {
   this.number = ''
   this.isClean = true
 
+  const { prefix, suffix, decimal } = options
+
+  this.preSurRegExp = new RegExp(`${prefix}|${suffix}`, 'g')
+  this.numberRegExp = new RegExp(`[^0-9\\${decimal}]+`, 'gi')
+  this.cleanRegExp = new RegExp('[^0-9]+', 'gi')
+  this.negativeRegExp = new RegExp('[^0-9\\-]+', 'gi')
+
   this.isNull = (input = this.input) => {
     if (this.isClean) {
-      return !this.numberOnly(input, new RegExp('[^0-9]+', 'gi'))
+      return !this.numberOnly(input, this.cleanRegExp)
     }
-    return !this.numberOnly(input, new RegExp('[^0-9\\-]+', 'gi'))
+    return !this.numberOnly(input, this.negativeRegExp)
   }
 
   this.clean = (clean = false) => {
@@ -65,10 +72,8 @@ export default function NumberFormat(config = options) {
         '.'
       ).join(this.options.decimal)
     } else {
-      this.number = this.numberOnly(
-        this.input,
-        new RegExp(`[^0-9\\${this.options.decimal}]+`, 'gi')
-      )
+      const input = this.input.replace(this.preSurRegExp, '')
+      this.number = this.numberOnly(input, this.numberRegExp)
       this.number = this.parts(this.number).join(this.options.decimal)
     }
     return this.number