How to get options when user clicks on the More icon in vue.js?

i have an icons.vue component in that it will contain several font-awesome icons,when i click on more icon(3 dots[last icon in my component]),it should display some options like This image ,i am showing my icons imageplease help me How to acheive this thing

icons.vue

<template>
<div class="footer">
    <i class="fas fa-bell"></i>
    <i class="fas fa-user"></i>
    <i class="fas fa-palette"></i>
    <i clss="fas fa-image"></i>
    <i class="fas fa-archive"></i>
<!-- fa-ellipse-v is the Three dot or more icon -->
    <i @click="options" class="fas fa-ellipsis-v"></i>
</div>
</template>
<script>
export default{
methods:{
options(){

}
}
}
</script>
<style scoped>
.footer i {
    opacity: 0.9;
    position: relative;
}

.footer .fa-bell {
    margin-top: 5px;
    margin-left: 10px;
}

.footer .fa-user {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-palette {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-image {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-archive {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-ellipsis-v {
    margin-top: 5px;
    margin-left: 40px;
cursor:pointer;
}
</style>

Answer

I haven’t done much with Font Awesome, so I built an example of a possible solution as a self-training opportunity, using Vue 2 and the Vue CLI.

I found a couple of helpful links, one for vue-fontawesome and a gallery of solid icons

Here is the Single File Component that I built:

IconList.vue

<template>
  <div class="icon-list">
    <h3>Icon List</h3>
    <div class="row">
      <div class="col-md-6">
        <ul class="list-group">
          <li v-for="(iconName, index) in currentIcons" :key="index" class="list-group-item" >
            <font-awesome-icon :icon="iconName" class="fa-2x" />
          </li>
        </ul>
        <button v-if="displayMoreBtn" class="btn btn-secondary" @click="showMore" >
          <font-awesome-icon icon="ellipsis-h" class="fa-2x" />
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { library } from "@fortawesome/fontawesome-svg-core";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
import { faCloudMoonRain } from "@fortawesome/free-solid-svg-icons";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
import { faFan } from "@fortawesome/free-solid-svg-icons";
import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
import { faGuitar } from "@fortawesome/free-solid-svg-icons";
import { faPeace } from "@fortawesome/free-solid-svg-icons";
import { faRobot } from "@fortawesome/free-solid-svg-icons";

library.add(faCoffee);
library.add(faCloudMoonRain);
library.add(faEnvelope);
library.add(faFan);
library.add(faEllipsisH);
library.add(faGuitar);
library.add(faPeace);
library.add(faRobot);

export default {
  data() {
    return {
      initialIcons: ["coffee", "cloud-moon-rain", "envelope", "fan"],
      additionalIcons: ["guitar", "peace", "robot"],
      displayMoreBtn: true,
      currentIcons: [],
    };
  },
  methods: {
    showMore() {
      this.currentIcons = this.currentIcons.concat(this.additionalIcons);
      this.displayMoreBtn = false;
    },
  },
  created() {
    this.currentIcons = this.initialIcons;
  },
};
</script>

Along with my App.vue

<template>
  <div id="app" class="container">
    <icon-list />
  </div>
</template>

<script>
  import IconList from '@/components/stackoverflow/font-awesome-list/IconList'

  export default {
    name: 'App',
    components: {
      IconList
    },
  }
</script>

and main.js:

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css'

// Font Awesome
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Advertisement

Answer