@forvue/vue-directives
v0.1.5
Published
Vue.js 2.0 directives
Readme
@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/[email protected]/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|