Introduction to the method of implementing custom buttons in Vue (with code)

This article brings you an introduction to the method of implementing custom buttons in Vue (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In actual development projects, sometimes we use custom buttons; because in a project, there are many pages, and in order to unify the style, we will reuse many of the same or similar buttons. At this time, custom buttons Defining the button component comes in handy. We export the defined button component and reference it globally, so that it can be used in other components at will. This can greatly improve our work efficiency.

Okay, without further ado, here’s the code:
img-button.vue//This is our custom button component

<template>
  <div>
    <!-- 图片按钮 -->
    <div v-if="type === &#39;查看&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn check-img"></div>
    <div v-if="type === &#39;添加&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn add-img"></div>
    <div v-if="type === &#39;修改&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn edit-img"></div>
    <div v-if="type === &#39;删除&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn delete-img"></div>
    
    <div v-if="type === &#39;刷新&#39;" :title="tag === &#39;&#39; ? type : tag"  class="img-btn refresh-img"></div>
    <div v-if="type === &#39;关闭&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn close-img"></div>
    
    <div v-if="type === &#39;齿轮&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn gear-img"></div>
    <div v-if="type === &#39;平面图&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn plan-img"></div>
    <div v-if="type === &#39;地图&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn map-img"></div>
    <div v-if="type === &#39;一般模板&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn normal-img"></div>
    <div v-if="type === &#39;特殊模板&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn special-img"></div>
    <div v-if="type === &#39;折线图&#39;" :title="tag === &#39;&#39; ? type : tag" class="img-btn line-img"></div>
    <!-- 文字按钮 自定义大小-->
    <div v-if="type === &#39;按钮&#39;" :title="tag === &#39;&#39; ? name : tag" class="img-btn ibtn">{{name}}</div>
    <div v-if="type === &#39;小按钮&#39;" :title="tag === &#39;&#39; ? name : tag">{{name}}</div>
    <div v-if="type === &#39;普通按钮&#39;" :title="tag === &#39;&#39; ? name : tag">{{name}}</div>
  </div>
</template>

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

<style 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 routing in router.js
Introduce

//注册自定义按钮  
import imgButton from './components/img-button'
Vue.use(imgButton)

into main.js and then use it in other components

<imgButton type=&#39;刷新&#39; @click.native=&#39;refreshBtn&#39;></imgButton>

//It is worth noting that when adding a click event to a custom button component, you must add .native Because the .native modifier is used to register native events of elements rather than component custom events

This article has ended here. For more other exciting content, you can pay attention to the PHP Chinese websiteJavaScript video tutorial column! ! !

The above is the detailed content of Introduction to the method of implementing custom buttons in Vue (with code). For more information, please follow other related articles on the PHP Chinese website!