@forvue/vue-directives NPM

@forvue/vue-directives

Vue directives

Vue module for directives in your applications. Some of goals of this project worth noting include:

Be lightweight, powerful and easy to use
Supports Multi-parameter
Supports Vue 2.0

Requirements

Vue.js 2.x

Installation

npm

$ npm i @forvue/vue-directives -S

yarn

$ yuarn add @forvue/vue-directives

CDN

CDN: https://unpkg.com/@forvue/vue-directives

Usage

Global Registration

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueDirectives from '@forvue/vue-directives'

Vue.use(VueDirectives)

new Vue({
  el: 'body',
  components: {
    App
  }
})

Local Registration

XXX.vue

<template>
  <div class="hello">
    <input type="text" v-integer v-model="integer">
  </div>
</template>
<script >
  import {integer} from '@forvue/vue-directives'
  export default {
    data() {
      return {
         integer: '1'
      }
    },
    directives: {
      integer
    }
  }
</script>

CDN Registration

template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/@forvue/vue-directives"></script>
    <title>VueDirectives</title>
</head>
<body>
<div id="app">
    <input v-model="number" v-integer type="text">
</div>
<script>
    window.onload=function(){
        Vue.use(VueDirectives)
        let vm=new Vue({
            el:'#app',
            data:{
                number: 2
            }
        })
    }
    // or CDN Registration
    window.onload=function(){
            let vm=new Vue({
                el:'#app',
                data:{
                    number: 2
                },
                directives: {
                    integer: VueDirectives.integer
                }
            })
        }
</script>
</body>
</html>

DirectivesOptions

v-integer.required.cover="{}"

key	description	default	options	mode
`required`	`Not empty`	`false`	`Boolean`	`modifiers&value`
`cover`	`Overflow Coverage`	`false`	`Boolean`	`modifiers&value`
`requireValue`	`Overflow empty`	`0`	`Number`	`value`
`max`	`input Maximum value`	`Infinity`	`Number`	`value`
`min`	`input minimum value`	`-Infinity`	`Number`	`value`
`maxFigures`	`max length`	`Infinity`	`Number`	`value`
`coverEvents`	`can Overflow events`	`['blur']`	`Array`	`value`
`warningEvents`	`warning events`	`['blur']`	`Array`	`value`
`tipFun`	`warning callback`	`null`	`Function`	`value`