Format input text content when you are typing
Switch branches/tags
Clone or download
Pull request Compare This branch is 6 commits ahead, 261 commits behind nosir:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build first commition Jul 16, 2016
config first commition Jul 16, 2016
src first commition Jul 16, 2016
.babelrc first commition Jul 16, 2016
.editorconfig first commition Jul 16, 2016
.eslintignore first commition Jul 16, 2016
.gitignore first commition Jul 16, 2016
README.md Update README.md Jul 16, 2016
index.html first commition Jul 16, 2016
package.json first commition Jul 16, 2016

README.md

Vue-Cleave

forked from https://github.com/nosir/cleave.js

CleaveJS as a component of VueJS

Run the example

git clone git@github.com:jrainlau/vue-cleave.git
cd vue-cleave && npm install
npm run dev

VueJS component usage

Find the main file in ./src/App.vue and ./src/components/cleave.vue.

<!-- 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>

By using cleave.vue as a component, there are three things for you to do:

  1. Import cleave.vue and set as a component of the parent.
  2. Pass in the custom cleaveOptions prop.
  3. Simply use <Cleave></Cleave> as a normal <input/> field.

Options

The options in vue-clive is same to the the Doc below:

Cleave.js Documentation

License

Vue-Cleave is licensed under the Apache License Version 2.0