vue-mixins v0.3.6
vue-mixins
A collection of mixins in vue. Heavily used in vue-comps.
Policy
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
Install
npm install --save-dev vue-mixins
or include bundle.js
Usage
## whithin your module
components:
mixins:[
require("vue-mixins/onClick")
]
# if you have used the bundle.js
components:
mixins:[
window.vueMixins.onClick
]
List of mixins
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) |
Detailed usage
getViewportSize
// adds a method:
// getViewportSize()
//
// usage:
vs = this.getViewportSize()
vs.width
vs.height
getDocumentHeight
// adds a method:
// getDocumentHeight()
//
// usage:
height = this.getDocumentHeight()
onceDocument
// 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
onClick
// 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>
onClickStack
// 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>
onClickStore
// 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>
onDocument
like onceDocument
, but doesn't remove itself on first successful invokation.
onWindowResize
// 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`
onElementResize
// 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`
onWindowScroll
// 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`
setCss
// 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", "")
dynamicCss
// 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"}})
vue
// adds a computed property:
// Vue
//
// usage:
Vue = this.Vue
isOpened
// 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()
}
parentListener
// 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
}
fragToString
// adds a method: "fragToString"
// usage:
str = this.fragToString(someFrag)
// str contains outerHTML of someFrag
class
// 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
style
// 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 both
transition
used 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
.
onMouseMove
// 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`
Develop
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']
License
Copyright (c) 2015 Paul Pflugradt Licensed under the MIT license.
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago