vue-function-snackbar

A snackbar component based on vue-function-api

Usage

<template>
  <div class="your-app>
    <Snackbar :show="showSnackbar" @hide="handleHide" @click="handleClick">Hello World</Snackbar>
  </div>
</template>
 
<script>
import { value } from 'vue-function-api'
import Snackbar from 'vue-function-snackbar'
 
export default {
  name: 'YourApp',
 
  setup() {
    const showSnackbar = value(false)
 
    return {
      showSnackbar,
 
      handleHide() {
 
      },
 
      handleClick() {
 
      },
    }
  },
 
  components: {
    Snackbar,
  },
}
</script>
 
<style scoped>
  .your-app {
    /* You can custom the z-index of vue-snackbar by CSS variable, default is 100 */
    --vue-snackbar-z-index: 1000;
  }
</style>