Einführung in die Methode zur Implementierung benutzerdefinierter Schaltflächen in Vue (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die Methode zur Implementierung benutzerdefinierter Schaltflächen in Vue (mit Code). Ich hoffe, dass er Ihnen als Referenz dienen wird.

In tatsächlichen Entwicklungsprojekten verwenden wir manchmal benutzerdefinierte Schaltflächen. Um den Stil zu vereinheitlichen, verwenden wir derzeit viele benutzerdefinierte Schaltflächen Das Definieren der Schaltflächenkomponente ist praktisch. Wir exportieren die definierte Schaltflächenkomponente und referenzieren sie global, sodass sie nach Belieben in anderen Komponenten verwendet werden kann.

Okay, ohne weitere Umschweife, hier ist der Code:
img-button.vue//Dies ist unsere benutzerdefinierte Schaltflächenkomponente

<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>

Konfigurieren Sie das Routing in router.js
Einführen

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

in main.js einfügen und dann in anderen Komponenten verwenden

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

//Es ist erwähnenswert, dass Sie beim Hinzufügen von Klickereignissen zu benutzerdefinierten Schaltflächenkomponenten .native hinzufügen müssen. Weil die .native Der Modifikator wird verwendet, um native Ereignisse von Elementen und nicht von benutzerdefinierten Komponentenereignissen zu registrieren.

Dieser Artikel finden Sie hier. Weitere spannende Inhalte finden Sie in der Rubrik „PHP Chinese Website“JavaScript-Video-Tutorial ! ! !

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Implementierung benutzerdefinierter Schaltflächen in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!