How to format your input using CleaveJS in Vue

What's CleaveJS?

CleaveJS It is a popular project on github recently. In just over a month, the number of stars has reached 2500+ and maintains a strong upward momentum. Its main purpose is

Format input text content when you are typing

You can view the official onlineDEMOHave a experience.

Vue-Cleave

The official CleaveJS is only availableNative JSandReactJS The version looks like it is ready to be releasedAngularJS The version is now. But when I putVueJS After the version of pullrequest passed, I got this answer:

Thanks for playing cleave with . is an amazing framework but for now, we will just focus on what we can handle.
So we will not add this support in the original repo, will close this, cheers.

It seems that I have to publish it independently and contribute to the Vue JS community...

Usage

Direct QuoteprojectExamples of the presentation. First, create a parent component named , and its code is as follows:

<!--  -->

<template>
 <Cleave :options='cleaveOptions' v-model='formatedValue'></Cleave>
</template>

<script>
import Cleave from './components/'

export default {
 data() {
  return {
   formatedValue: '',
   cleaveOptions: {
    numeral: true,
    numeralDecimalScale: 4
   }
  }
 },
 watch: {
  'formatedValue': (val) => {
   (val)
  }
 },
 components: {
  Cleave
 }
}

</script>

Then what? there is none left.

The usage method is very simple. You just need to import the component to reference it, and then pass the written custom cleaveOptions into <Cleave/> in the parent component through dynamic props. We can use <Cleave/> directly as an ordinary <input/> element.

For custom cleaveOptions, its settings andOfficial DocumentationIt's the same, just follow the settings.

PS: For the problem of formatting phone numbers, you need to enter the file and manually introduce the addon package of the corresponding country:

require('../lib/addons/phone-type-formatter.{country}')

License

Vue-Cleave is licensed under the Apache License Version 2.0

is included under its Apache License Version 2.0

Google libphonenumber is included under itsApache License Version 2.0

Last but not least...

Due to the synchronization of the reference package and the official package, and the official package still has some minor bugs, Vue-Cleave will also have flaws, but I will try to update and maintain it in time. Everyone is also welcome to maintain it together and establish a more complete VueJS ecosystem.

Project address:/jrainlau/vue-cleave

The level is limited. If you find any errors and omissions, please give me some advice. I am Jrain, and I welcome to follow my column, share my learning experience, development experience, and carry out dry goods outside the wall from time to time. See you next time, thank you everyone!

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.