A collection of mixins in vue. Heavily used in vue-comps.
all sorts of mixins can be submitted. There will be no removes because of deprecation. If the API of a mixin changes the name has to change, for example onResize -> onResize2
npm install --save-dev vue-mixinsor include bundle.js
## whithin your module
components:
mixins:[
require("vue-mixins/onClick")
]
# if you have used the bundle.js
components:
mixins:[
window.vueMixins.onClick
]| Name | src | description |
|---|---|---|
| getViewportSize | src | adds a method getViewportSize which returns an object containing the width and height of the viewport |
| getDocumentHeight | src | adds a method getDocumentHeight which returns the height of the document |
| onceDocument | src | adds a eventListener to the document which removes itself after first successful call |
| onClick | src | adds a method click which will call the function onClick if set |
| onClickStack | src | adds two methods: click and addToClickStack |
| onClickStore | src | adds two methods: click and onClick (see below) |
| onDocument | src | like onceDocument but doesn't removes itself |
| onResize | src | deprecated |
| onWindowResize | src | fires on resize of window (throttled and bundled) |
| onElementResize | src | fires on resize of window or element, but only if the dimensions of the element changed |
| onWindowScroll | src | fires on scroll on window (throttled and bundled) |
| setCss | src | set Css of another element |
| dynamicCss | src | dynamically manipulate css stylesheet |
| getVue | src | deprecated, use vue instead |
| vue | src | adds a computed property Vue with the current instance of Vue |
| isOpened | src | adds everything for opened state management (two-way) |
| isOpened2 | src | same as isOpened but for vue 2.0 (one-way) |
| parentListener | src | hooks a function upon parent click |
| parentListener2 | src | same as parentListener but for vue 2.0 |
| fragToString | src | converts a documentFragment to String |
| class | src | used to create a properly merged vue class object/array from a given prop and another vue class object/array |
| style | src | used to create a properly merged vue style object/array from a given prop and another vue style object/array |
| transition | src | used to manage user provided transition in a reusable component |
| transition2 | src | same as transition but for vue 2.0 |
| onMouseMove | src | fires on move of the mouse (throttled and bundled) |
// adds a method:
// getViewportSize()
//
// usage:
vs = this.getViewportSize()
vs.width
vs.height// adds a method:
// getDocumentHeight()
//
// usage:
height = this.getDocumentHeight()// adds a method:
// onceDocument(event, cb, useCapture)
//
// usage:
dispose = this.onceDocument('click',function(e){
doSomething()
// return true will remove the listener
// return false will not remove the listener
},false)
dispose() // will remove the listener// adds a method:
// click(event) which will call this.onClick(e) if available
//
// usage:
this.onClick = function(e) {doSomething()}<!-- in template -->
<div @click="click"></div>// adds two methods:
// - click(event) will call the last function in this.onClickStack if available
// - addToClickStack(fn) will add a function to this.onClickStack and return a function to dispose it
//
// usage:
var dispose = null
var cb = function(e) {
doSomething()
dispose() // to remove from stack
}
dispose = this.addToClickStack(cb)<!-- in template -->
<div @click="click"></div>// adds two methods:
// - click(event) will call all functions in this.onClickStore
// - onClick(fn) will add a function to this.onClickStore and return a function to dispose it
//
// usage:
var dispose = null
var cb = function(e) {
doSomething()
dispose() // to remove from store
}
dispose = this.onClickStore(cb)<!-- in template -->
<div @click="click"></div>like onceDocument, but doesn't remove itself on first successful invokation.
// adds a method: onWindowResize(cb) which will return a function to dispose it
//
// usage:
dispose = this.onWindowResize(function(){/*doSomethingOnWindowResize*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`// adds a method: onElementResize(el, cb) which will return a function to dispose it
//
// usage:
dispose = this.onElementResize(el, function(){/*doSomethingOnElementResize*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`// adds a method: onWindowScroll(cb) which will return a function to dispose it
//
// usage:
dispose = this.onWindowScroll(function(){/*doSomethingOnWindowScroll*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`// adds a method:
// setCss(element,cssProperty, cssValue)
//
// usage:
this.setCss(document.body,"overflow","hidden")
// remove overflow from style attribute
this.setCss(document.body,"overflow")
// or
this.setCss(document.body,"overflow", "")// used to create a stylesheet and set rules in it.
// adds a method:
// setCssRules(newRules)
//
// usage:
this.setCssRules({body: {overflow: "hidden"}})
// to remove a rule:
this.setCssRules({body: {overflow: null}})
// nesting:
this.setCssRules({body: {"& div": {width: "10px"},overflow:"hidden"}})
// is short for: (& will be replaced by the parent selector)
// deeper nesting is allowed
this.setCssRules({body: {overflow:"hidden"},"body div": {width: "10px"}})// adds a computed property:
// Vue
//
// usage:
Vue = this.Vue// adds a boolean prop "isOpened" which will call "this.toggle()" on change
// the state is saved on "opened"
//
// adds two methods:
// setOpened(), setClosed() which will set "this.isOpened" without triggering
// the toggle
// and emit a event "toggled(opened)"
//
// usage:
methods:
toggle: function(){
if (this.opened) {
this.close()
} else {
this.open()
}
}
open: function() {
this.setOpened()
}
close: function() {
this.setClosed()
} // adds two props: "ignoreParent" and "parent", which
// defaults to "this.$el.parentElement"
//
// usage:
methods:
onParentClick: function() {
// will be called when "ignoreParent" is false on click on parent
}// adds a method: "fragToString"
// usage:
str = this.fragToString(someFrag)
// str contains outerHTML of someFrag// adds a computed property: "computedClass"
// which merges a "mergeClass" data object/array and a "class" prop.
// usage:
template: "<div :class=computedClass></div>",
props: {
class: {
default: function() {
return ["someClass"]
}
}
},
data: function() {
return {
mergeClass: ["anotherClass"]
}
}
// computedClass will be ["anotherClass","someClass"] when no prop is given
// if the component is used like this <comp :class="['yetAnotherClass']"></comp>
// computedClass will be ["anotherClass","yetAnotherClass"]
// works also with object notation and a mixture of both// adds a computed property: "computedStyle"
// which merges a "mergeStyle" data object and a "style" prop.
// usage:
template: "<div :style=computedStyle></div>",
props: {
style: {
default: function() {
return {color:"red"}
}
}
},
data: function() {
return {
mergeStyle: {color:"blue"}
}
}
// computedStyle will be [{color:"blue"},{color:"red"}] when no prop is given
// if the component is used like this <comp :style="{color:white}"></comp>
// computedStyle will be [{color:"blue"},{color:"white"}]
// works also with array notation and a mixture of bothused to manage user provided transition in a reusable component
// adds a method: "processTransition" and a computed value "cTransition"
// usage:
template: "<div :transition=cTransition></div>",
props: {
transition: {
type: String,
default: "someDefaultTransition"
}
},
ready: function() {
this.$on("before-enter",function(){
// will be called after element is inserted in dom but before transition starts
// regardless of a optional provided transition
})
}processTransition(name,parent = this.$parent) resolves name to the actual transition on
parent vm or global Vue. Adds before-enter, after-enter, before-leave, after-leave, enterCancelled and leaveCancelled emit hooks on the instance and inserts the modified transition into this.$options.transitions[name]
cTransition lazily calls processTransition on the first transition and every time transition changes.
You can disable transition by setting this.disableTransition = true.
// adds a method: onMouseMove(cb) which will return a function to dispose it
//
// usage:
dispose = this.onMouseMove(function(){/*doSomethingOnMouseMove*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`Clone rep
npm install
Available scripts:
npm run build # compiles coffee-script in src/
npm run test # runs a single-run karma in chrome and firefox
npm run watch # runs karma in chrome (uses src/*.coffee files direclty, no need for build)
# to run only single tests:
karma start --browsers Chrome --auto-watch --reporters spec --files ['test/onClick.coffee']
Copyright (c) 2015 Paul Pflugradt Licensed under the MIT license.