Vue-position-after-transform NPM

vue-position-after-transform

Why

Because Css is positioning elements before transform, some special positioning is difficult or even impossible.

What

Vue-position-after-transform does js positioning after css-transform - with the help of getBoundingClientRect

See it in action

Install

npm install --save-dev vue-position-after-transform

or include build/bundle.js

Usage

# link the components up
components:
  "vc-pat": require("vue-position-after-transform").parent
  "vc-patc": require("vue-position-after-transform").child
  # or when using bundle.js:
  "vc-pat": window.vueComps.pat
  "vc-patc": window.vueComps.patc

# in the template
vc-pat
  vc-patc(style="transform:rotate(45deg)") some rotated stuff

see dev/ folder for examples

Props

Name	type	default	description
update	Boolean	false	will update on element resize
valign	String	"top"	available: "top", "center", "bottom"
halign	String	"left"	available: "left", "center","justify", "right"
childwidth	String	"mean"	available: "mean", "actual" or an absolute number; width which is taken to position the children.
origin	String	"center"	available: "left", "center", "right"; used in halign: "center" and "justify" to position child relative to given childwidth
rotatedParent	Boolean	false	set `true` when the component is rotated somehow. This will append the content to `body` during calculation, consequently all nested styling will be ignored