Vue Notibar - Example / Live demo

https://github.com/b-maslennikov/vue-notibar

by Boris

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.15/dist/vue.js"></script>
<script src="https://unpkg.com/vue-notibar/dist/vue-notibar.min.js"></script>
<script src="https://unpkg.com/vue-color@2.7.0/dist/vue-color.min.js"></script>
<div id="app">

  <div class="container">
    <label>Text:</label>
    <input type="text" v-model="text" />    
  </div>
  
  <div class="container">
    <label>Time before hide:</label><br>
    <input type="range" min="0" max="10000" step="1000" v-model="options.time"> <label>{{ options.time / 1000 }} second<span v-if="options.time > 1000">s</span></label>
    <div v-if="options.time == 0" style="color:red">Don't forget to enable dismiss button</div>    
  </div>
  
  <div class="container">
    <label>Text color:</label>
    <compact-picker v-model="options.textColor" />
  </div>
  
  <div class="container">
    <label>Background color:</label>
    <compact-picker v-model="options.backgroundColor" />
  </div>
  
  <div class="container">
    <label>Position:</label><br>
    <input id="leftPos" type="radio" v-model="options.position" value="left"> <label for="leftPos">Left</label>
    <input id="centerPos" type="radio" v-model="options.position" value="center"> <label for="centerPos">Center</label>
    <input id="rightPos" type="radio" v-model="options.position" value="Right"> <label for="rightPos">Right</label>
  </div>
  
  <div class="container">
    <label>Dismiss button:</label><br>
    <input id="dismissButton" type="checkbox" v-model="options.dismiss.show"> <label for="dismissButton">Show</label>
  </div>
  
  <div class="container">
    <button @click="showDefault" class="default">Show with default options</button>
    <button @click="showCustom" :style="customStyle">Show with custom options</button>
  </div>
    
</div>

CSS

.container {
  margin: 20px;
}

input[type="range"] {
  vertical-align: middle;
}

input[type="text"] {
  padding: 5px;
  font-size: 18px;
  display: block;
}

button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

button.default {
  background-color: #323232;
  color: #ffffff;
}

Vue

Vue.use(VueNotibar)

new Vue({
  el: "#app",
  components: {
  	'compact-picker': VueColor.Compact,
  },
  data: {
  	text: '😎 Hi there! 😎',
    options: {
    	textColor: { hex: '#000000' },
      backgroundColor: { hex: '#fcc400' },
      time: 4000,
      position: 'center',
      dismiss: {
      	show: false
      }
    }
  },
  computed: {
  	customOptions() {
    	return { 
      	textColor: this.options.textColor.hex,
        backgroundColor: this.options.backgroundColor.hex,
        time: this.options.time == 0 ? null : this.options.time,
        position: this.options.position,
        dismiss: {
        	show: this.options.dismiss.show
        }
      }
    },
    customStyle() {
    	return `background-color: ${this.customOptions.backgroundColor};` +
      			 `color: ${this.customOptions.textColor};`
    }
  },
  methods: {
  	showDefault() {
    	this.$notibar.add(this.text)
    },
    showCustom() {
    	this.$notibar.add(this.text, this.customOptions)
    }
  }
})