Tooltip User Notification Popup box Based on Vue.js

Tooltip User Notification Popup box Based on Vue.js: BY Matthew15 Jan,2021; Tags:
Tooltip Vue.js

Introduction

This time we are going to bring another Tooltip user notification pop-up box plugin based on Vue.js, it features a different tooltip from others, it focuses more on user notification features, so we can directly integrate this plugin into our own system to provide user notification features.

Instructions

HTML Body Code

<transition name="fadeStart" v-cloak>
      <div v-if="show" class="tooltip">
        <div id="heading">
          <div class="heading-left">
            <h6 class="heading-title">Notifications</h6>
          </div>
          <div class="heading-right">
            <a class="notification-link" href="#">See all</a>
          </div>
        </div>
        <ul class="notification-list">
          <li class="notification-item" v-for="user of users">
            <div class="img-left">
              <img class="user-photo" alt="User Photo" v-bind:src="user.picture.thumbnail" />
            </div>
            <div class="user-content">
              <p class="user-info"><span class="name">{{user.name.first | capitalize}} {{user.name.last | capitalize}}</span> left a comment.</p>
              <p class="time">1 hour ago</p>
            </div>
          </li>
        </ul>
      </div>
    </transition>

Css Code

.container {
  width: 20rem;
  height: 20rem;
  grid-area: main;
  -ms-flex-item-align: center;
  align-self: center;
  justify-self: center;
  margin:10px auto;
}

h2 {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2rem;
  color: #1f2022;
}

ul {
  list-style-type: none;
  padding: 0.5rem 1rem;
  margin: 0 0 0.5rem;
}

li {
  display: inline-block;
  padding: 0.85rem 1rem;
  color: #1f2022;
}

Js Code

new Vue({
  el: '.container',
  data: function data() {
    return {
      users: [],
      errors: [],
      show: true
    };
  },

  mounted: function mounted() {
    this.getUsers();
  },


  methods: {
    getUsers: function getUsers() {
      var _this = this;

      axios.get('https://randomuser.me/api/?results=3').then(function (response) {
        console.log(JSON.stringify(response.data.results));
        _this.users = response.data.results;
      }).catch(function (e) {
        _this.errors.push(e);
      });
    }
  },

  filters: {
    capitalize: function capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
});

VIEW NOW