Skip to content

Instantly share code, notes, and snippets.

@dasDaniel

dasDaniel/BaseAlert.vue

Last active April 6, 2018 17:01
Show Gist options
  • Save dasDaniel/c76418f65c3a4e79e2e475e4110bc88f to your computer and use it in GitHub Desktop.
Save dasDaniel/c76418f65c3a4e79e2e475e4110bc88f to your computer and use it in GitHub Desktop.
Download ZIP
Functional Base Component with class and style inheritance
Raw
readme.md

this line:
:class="['alert', data.class, data.staticClass].join(' ')" :style="data.style"
allows the class and style to be injected from the parent component

Raw
BaseAlert.vue
<template functional>
<div :class="['alert', data.class, data.staticClass].join(' ')" :style="data.style">
<slot name="icon">
</slot>
<slot name="body">
</slot>
</div>
</template>
Raw
OtherAlert.vue
<template>
<BaseAlert class="c__alertemailvalidation" :class="'dynamicClass'" :style="{display: isVisible ? 'inherit' : 'none'}">
<div slot="icon" class="alert-icon">
</div>
<div slot="body">
<h3>Title</h3>
<p>
message
</p>
<button/>DO IT</button>
</div>
</BaseAlert>
</template>
<script>
import BaseAlert from './BaseAlert';
export default {
name: 'OtherAlert',
components: {
BaseAlert,
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment