Vue events don't bubble the component tree on their own. However when writing wrapper components this can be the desired behaviour.
This code registers a global bubble directive which allows to re-emit all given events:
Let's say we want to bubble events start, accelerate and brake of our component Car.
Without any help, we'd roughly have to do this:
| function formatBytes(bytes,decimals) { | |
| if(bytes == 0) return '0 Bytes'; | |
| var k = 1024, | |
| dm = decimals || 2, | |
| sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], | |
| i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; | |
| } | |
| // Usage: |
| (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.JSXTransformer=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module,exports){"use strict";var ReactTools=_dereq_("../main");var inlineSourceMap=_dereq_("./inline-source-map");var headEl;var dummyAnchor;var inlineScriptCount=0;var supportsAccessors=Obj |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| .nav-tab { | |
| ... | |
| // instead of putting it on | |
| border-right: 1px solid #424242; | |
| &:last-child { | |
| border-right: 0; // and then taking it off | |
| } | |
| // use CSS not() to only apply to the elements you want | |
| &:not(:last-child) { | |
| border-right: 1px solid #424242; |
| /** | |
| * NEVER BLOCKING LOOP : implementation of the infamous setTimeout 0 hack, with time checking in order to guarantee fluidity without sacrificing execution speed. | |
| * | |
| * USAGE : | |
| * var array = ["a way too big array that is heavy to process"] | |
| * optimizeFor({ | |
| * nbIterations: array.length, | |
| * each:function( index ) { | |
| * doSomethingUsefulWith( array[ index ] ); | |
| * }, |
| <!-- root dict node --> | |
| <!-- <dict> --> | |
| <key>NSUIElement</key> | |
| <string>1</string> | |
| <!-- other code inside dict --> | |
| <!-- </dict> --> |
MIT License
Copyright (c) [year] [fullname]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: