1<template> 2 <b-alert :show="show" :variant="variant" :class="{ small }"> 3 <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon"> 4 <status-icon :status="variant" /> 5 </div> 6 <div class="alert-content"> 7 <div class="alert-msg"><slot /></div> 8 </div> 9 </b-alert> 10</template> 11 12<script> 13import StatusIcon from '../Global/StatusIcon'; 14import { BAlert } from 'bootstrap-vue'; 15 16export default { 17 name: 'Alert', 18 components: { 19 BAlert: BAlert, 20 StatusIcon: StatusIcon 21 }, 22 props: { 23 show: { 24 type: Boolean, 25 default: true 26 }, 27 variant: { 28 type: String, 29 default: '' 30 }, 31 small: Boolean 32 } 33}; 34</script> 35 36<style lang="scss" scoped> 37.alert.small { 38 padding: $spacer / 2; 39 font-size: 1rem; 40} 41</style> 42