v-stylish

v-stylish

Diretivas Vue.js para faciliar a manipulação dinâmica de classes e estilo

Por que v-stylish?

As vezes eu não quero criar um objeto para definir uma classe ou estilo dinâmico em um elemento. Então eu trouxe essa funcionalidade do Angular

Instalação

npm install --save v-stylish

Instalando como Plugin

import Vue from 'vue';
import vStylish from 'v-stylish';

Vue.use(vStylish);

Instalando manualmente

import Vue from 'vue';
import { vClass, vStyle } from 'v-stylish';
  
Vue.directive(vClass.name, vClass);
Vue.directive(vStyle.name, vStyle);

Como usar

v-class

Para alternar uma única classe em um elemento você precisa apenas usar a diretiva:
v-class:sua-class="Boolean".

A classe será definida da maneira como foi escrita.

Example

is-blue class is inactive

Source

<template>
  <div>
    <button type="button" @click="isBlue = !isBlue">toggle</button>

    <p v-class:is-blue="isBlue">
      is-blue class is {{ isBlue ? 'active' : 'inactive' }}
    </p>
  </div>
</template>

<script>
  export default {
    name: 'vClassDemo',
    data() {
      return {
        isBlue: false
      };
    }
  };
</script>

<style scoped>
  .is-blue {
    background-color: darkblue;
    color: lightblue;
  }
</style>

v-style

Para definir um único atributo de estilo em um elemento você precisa apenas usar a diretiva:
v-style:atributo.sufixo="Number | String".

Você pode escrever o atributo como CammelCase ou kebab-case: fontWeight ou font-weight.

Se necessário você pode atribuir um sufixo para o valor como um modificador de diretiva, exemplo: v-style:padding.px="14" irá definir o valor 14px ao padding do elemento
v-style:padding.%="14" irá definir o valor 14% ao padding do elemento

Example

font-weight: 400

Padding 0px

Padding 0%

Source

<template>
  <div>
    <label>Font-weight:</label><input v-model="fontWeight" />
    <p v-style:fontWeight="fontWeight">
      font-weight: {{ fontWeight }}
    </p>
    <hr />
    <label>Padding:</label><input v-model="padding" />
    <div
      class="square"
      v-style:padding.px="padding">
      Padding {{ padding }}px
    </div>
    <br />
    <div
      class="square"
      v-style:padding.%="padding">
      Padding {{ padding }}%
    </div>
  </div>
</template>

<script>
  export default {
    name: 'vStyleDemo',
    data() {
      return {
        padding: 0,
        fontWeight: 400
      };
    }
  };
</script>

<style scoped>
  .square {
    border: 1px solid black;
  }
</style>