@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
Table of Contents
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 |