@wearegenki/vue-directive-view

Overview

A very simple Vue custom directive to show or hide an element. It's a simpler alternative to using Vue' native v-show.

Part of @wearegenki/ui — a friendly UI framework which aims to be straightforward, intuitive, and high performance.

NOTE: This plugin is a dependency a some of the @wearegenki/ui vue components and is required for them to work correctly.

Differences to v-show

• When used with other package in the @wearegenki/ui framework it results in significantly faster animation and rendering performance due to using CSS opacity instead of v-show's display:none.
• Only adds or removes a hide class on the element.
• Doesn't trigger <transition> animations.

Usage

1. Install

yarn add @wearegenki/vue-directive-view

2. Register

import Vue from 'vue';
import vView from '@wearegenki/vue-directive-view';
import App from './App';

// register the custom directive
Vue.use(vView);

new Vue({
  el: '#app',
  render: h => h(App),
});

+ if you arn't using @wearegenki/css you'll also need to add CSS styles to handle the visibility, e.g.:

.hide {
  pointer-events: none;
  opacity: 0;
}

3. Use in component templates

<div v-view="toggle">Hidden element</div>

Options

The following options are available when registering the plugin:

NOTE: The default options are required for compatibility with @wearegenki/ui vue components.

Option	Default	Type	Description
name	'view'	<String>	The directive property name, e.g. the default = v-view.
class	'hide'	<String>	The name of the class which is added and removed.

Example:

...

Vue.use(vView, {
  name: 'view',
  class: 'hide',
});

...

Licence

@wearegenki/vue-directive-view is part of @wearegenki/ui, an Apache-2.0 licensed open source project. See LICENCE.

---

© 2018 We Are Genki