https://github.com/satrong/v-input

A Vue directive to control HTML input/textarea element value. Support Vue 2 and Vue 3.
https://github.com/satrong/v-input

vue

Last synced: 1 day ago
JSON representation

A Vue directive to control HTML input/textarea element value. Support Vue 2 and Vue 3.

• Host: GitHub
• URL: https://github.com/satrong/v-input
• Owner: satrong
• License: mit
• Created: 2021-07-20T06:37:30.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-18T02:36:57.000Z (over 2 years ago)
• Last Synced: 2024-09-23T04:32:41.137Z (5 days ago)
• Topics: vue
• Language: TypeScript
• Homepage:
• Size: 835 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





  English | 中文



A Vue directive to control HTML input/textarea element value. Support Vue 2 and Vue 3.

> [Online Demo](https://satrong.github.io/v-input/packages/demo/dist/)

## Installation

```shell

npm install vue-model-input

```

For Vue 2.x:

```js

import Vue from 'vue'

import vInput from 'vue-model-input'

Vue.use(vInput)

new Vue({

  // ...

}).$mount('#app')

```

For Vue 3.x:

```js

import { createApp } from 'vue'

import vInput from 'vue-model-input'

createApp({

  // ...

}).use(vInput).mount('#app')

```

## Usage

The format is as follow:

```html

```

Example:

```html

  


    

    

  


export default {

  data() {

    return {

      age: '',

      form: {

        total: ''

      }

    }

  }

}

```

## arg

Corresponding to the value of `v-model` , replace `.` with `:` when the value include `.` . 

For example, the value is `a.b.c` (ie. `v-model="a.b.c"` ), and the `arg` should be `a:b:c` (ie. `v-input:a:b:c`).

## modifier

- `number` Any number string

- `integer`

- `positive`

- `negative`

- `!0` Not zero

## bindValue

- `[min, max]` Limit the value range. Trigger by blur event.

- `(val) => string` Custom function. **⚠ DONOT RETURN DYNAMIC VALUE**