Vue-Cleave-Use CleaveJS to format your input in Vue

  es6, javascript, vue.js

Project address:https://github.com/jrainlau/vue-cleave

What’s CleaveJS?

CleaveJSIt is a popular project on github recently. In just over a month, the number of star has reached 2500+, and maintained a strong upward momentum. Its main purpose is to

Format input text content when you are typing
Format your input

You can check the official onlineDEMOExperience.

Vue-Cleave

The official CleaveJS only providesNative JSAndReactJSThe version, it seems, is also readyAngularJSThe version is now available. But when I putVueJSAfter the version of pullrequest passed, it got such a reply:

Thanks for playing cleave with vue.js. Vue.js 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 we have to publish it independently, contributing to the VueJS community …

Usage

Direct referenceProjectsAs a demonstration.
First create a parent component namedApp.vueThe code is as follows:

<!  -- App.vue -->
 
 <template>
 <Cleave :options='cleaveOptions' v-model='formatedValue'></Cleave>
 </template>
 
 <script>
 import Cleave from './components/cleave.vue'
 
 export default {
 data() {
 return {
 formatedValue: '',
 cleaveOptions: {
 numeral: true,
 numeralDecimalScale: 4
 }
 }
 },
 watch: {
 'formatedValue': (val) => {
 console.log(val)
 }
 },
 components: {
 Cleave
 }
 }
 
 </script>

Ya Sonra?
Not anymore.

The use method is very simple, only need to putcleave.vueComponent import comes in for reference, and then dynamically props it to the parent componentApp.vueThe custom written insidecleaveOptionsTo<Cleave/>Just go inside. We can put<Cleave/>As an ordinary<input/>Element is used directly.

For customcleaveOptionsThe contents of its settings andOfficial documentsIs the same, just follow the settings directly.

PS: for formattingTelephone numberThe problem, need to entercleave.vueFile, manually import addon package for corresponding country:

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

License

Vue-Cleave is licensed under theApache License Version 2.0

Last but not least …

Due to the synchronization of the quoted package and the official package, there are still some minor bugs in the official package, soVue-CleaveHowever, I will try my best to update and maintain it in time. I also welcome all of you to maintain it together and build a more perfect VueJS ecosystem.

The level is limited. If you find any mistakes or omissions, please give me some advice. I am Jrain, welcome to pay attention.My column, from time to time to share their learning experience, development experience, carrying dry goods outside the wall. See you next time, thank you!