8000 GitHub - jrainlau/vue-cleave: Format input text content when you are typing
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

jrainlau/vue-cleave

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Format input text content when you are typing

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 77.5%
  • Vue 21.2%
  • HTML 1.3%
0