JSPM

  • Created
  • Published
  • Downloads 1254
  • Score
    100M100P100Q106117F

collection of mixins in vue

Package Exports

  • vue-mixins/left
  • vue-mixins/onResize
  • vue-mixins/opacity
  • vue-mixins/right
  • vue-mixins/setCss
  • vue-mixins/width

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-mixins) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-mixins

A collection of mixins in vue. Currently mainly used to replace jQuery in vue-materialize.

Designed for webpack workflows.

Policy

all sorts of mixins can be submitted. There will be no deprecation. If the API of a mixin changes the name has to change, for example onResize -> onResize2

Install

npm install --save-dev vue-mixins

Example

## whithin your module
components:
  mixins:[
    require("vue-mixins/opacity")
  ]
//- in the template
div(style="{{opacity}}")
## where you use it
moduleName.setOpacity(1)

List of simple mixins

Name data method
left left setLeft(number)
right right setRight(number)
opacity opacity opacityValue setOpacity(number)
overflow overflow setOverflow(string)
width width setWidth(number/string)

Advanced mixins

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", "");

onResize

// adds data "resizeRunning" and "resizeCbs"
// and three methods "addResizeCb", "resizeHandler" and "callResizeCbs"
// usage:
cleanUp = this.addResizeCb(function(){/*doSomethingOnResize;*/});
// remove your cb
cleanUp();

Release History

  • v0.0.1: First release

License

Copyright (c) 2015 Paul Pflugradt Licensed under the MIT license.