In the actual development projects, sometimes we use the custom button. Because in a project, many pages, in order to unify the style, we will repeatedly use many of the same or similar buttons. At this time, the custom button component is of great use. We export the defined button component, and use it in the global reference, so that it can be freely used in other components Can greatly improve our work efficiency.

Well, I don't need to say much. Code:
IMG button. Vue / / this is our custom button component

<template>
  <div class="img-button">
    <!-- Picture button -->
    <div v-if="type === 'See'" :title="tag === '' ? type : tag" class="img-btn check-img"></div>
    <div v-if="type === 'Add to'" :title="tag === '' ? type : tag" class="img-btn add-img"></div>
    <div v-if="type === 'modify'" :title="tag === '' ? type : tag" class="img-btn edit-img"></div>
    <div v-if="type === 'delete'" :title="tag === '' ? type : tag" class="img-btn delete-img"></div>
    
    <div v-if="type === 'Refresh'" :title="tag === '' ? type : tag"  class="img-btn refresh-img"></div>
    <div v-if="type === 'Close'" :title="tag === '' ? type : tag" class="img-btn close-img"></div>
    
    <div v-if="type === 'gear'" :title="tag === '' ? type : tag" class="img-btn gear-img"></div>
    <div v-if="type === 'Plan'" :title="tag === '' ? type : tag" class="img-btn plan-img"></div>
    <div v-if="type === 'Map'" :title="tag === '' ? type : tag" class="img-btn map-img"></div>
    <div v-if="type === 'General template'" :title="tag === '' ? type : tag" class="img-btn normal-img"></div>
    <div v-if="type === 'Special template'" :title="tag === '' ? type : tag" class="img-btn special-img"></div>
    <div v-if="type === 'Broken line diagram'" :title="tag === '' ? type : tag" class="img-btn line-img"></div>
    <!-- Text button custom size-->
    <div v-if="type === 'Button'" :title="tag === '' ? name : tag" class="img-btn ibtn">{{name}}</div>
    <div v-if="type === 'Small button'" :title="tag === '' ? name : tag" class="ibtn-samll">{{name}}</div>
    <div v-if="type === 'General button'" :title="tag === '' ? name : tag" class="normal-btn">{{name}}</div>
  </div>
</template>

<script>
export default {
  name: 'ImgButton',
  props: { 
    type: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
  .img-button {
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    margin-right: 10px;
    .img-btn {
      .img-no-repeat;
      width:25px;
      height:25px;
    }
    .img-btn:hover {
      transform: scale(1.1);
    }
    .refresh-img {
      background-image: url('../../assets/images/button/refresh.png');
    }
    .add-img {
      background-image: url('../../assets/images/button/add.png');
    }
    .delete-img {
      background-image: url('../../assets/images/button/delete.png');
    }
    .check-img {
      background-image: url('../../assets/images/button/check.png');
    }
    .close-img {
      background-image: url('../../assets/images/button/close.png');
    }
    .edit-img {
      background-image: url('../../assets/images/button/edit.png');
    }
    .gear-img {
      background-image: url('../../assets/images/button/gear.png')
    }
    .plan-img {
      background-image: url('../../assets/images/button/plan.png')
    }
    .map-img {
      background-image: url('../../assets/images/button/map.png')
    }
    .normal-img {
      background-image: url('../../assets/images/button/normal.png')
    }
    .special-img {
      background-image: url('../../assets/images/button/special.png')
    }
    .line-img {
      background-image: url('../../assets/images/button/line_chart.png')
    }
    .ibtn {
      width: auto;
      min-width: 100px;
      padding: 0 20px;
      font-size: 17px;
      height: 30px;
      line-height: 30px; 
      text-align: center;
      border-radius:15px;
      background-color: #2f5d98;
      vertical-align: middle;
      color:#00cccc;
    }
    .ibtn-samll {
      .ibtn;
      height: 25px;
      padding: 0 2px;
      font-size: 10px;
      line-height: 25px;
      border-radius: 0px;
      background-color: transparent;
      border: 1px solid #00cccc;
    }
    .ibtn-samll:hover {
      color: white;
      border: 1px solid white;
    }
    .normal-btn {
      .ibtn;
    }
    .normal-btn:hover {
      color: white;
      background-color: #ff9247;
    }
  }
</style>

Configure the route in router.js
Introduce in main.js

//Register custom button  
import imgButton from './components/img-button'
Vue.use(imgButton)

Then it can be used in other components

<imgButton type='Refresh' @click.native='refreshBtn'></imgButton>

//It's worth noting that when adding click events to a custom button component, you must add. Native because the. Native modifier is used to register the element's native events instead of the component's custom events

Well, today's sharing is here.