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

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    04709d00d6ba3c5f435be94d7c303a26
    263aad0f3be955827bcc1d5aff6d44d116b28748ea4df4d9c2150843fecfba68
    aad86c7429f37c88963b0205ca0ffc0816b28748ea4df4d9c2150843fecfba68
    c39e35116018f22fc9d43d863213963616b28748ea4df4d9c2150843fecfba68
    aae4758416220133809f09342816be2816b28748ea4df4d9c2150843fecfba68
    
    c89b11abafb95dfa912242189996956116b28748ea4df4d9c2150843fecfba68
    fc4ac31e702ad115d23e6e14c451c02616b28748ea4df4d9c2150843fecfba68
    
    cee5906ba6065301930a04a53a1baa3116b28748ea4df4d9c2150843fecfba68
    83772e2350fd3906001956976985b75f16b28748ea4df4d9c2150843fecfba68
    6635fecc3c32ad94b7e63e62dcc6250916b28748ea4df4d9c2150843fecfba68
    83de2119fd466a298d7b653d18749a1916b28748ea4df4d9c2150843fecfba68
    307be776db83f1031b295f4ba02163cb16b28748ea4df4d9c2150843fecfba68
    843564a39424b1810738ffd30ba32ea316b28748ea4df4d9c2150843fecfba68
    7d63cbdceaf86b05d56f6d16b940be75
    864a99f598dc860ffc260a903a6e72c5{{name}}16b28748ea4df4d9c2150843fecfba68
    ff89184982e4152f49907ef10c90fb6f{{name}}16b28748ea4df4d9c2150843fecfba68
    2e48a71262777de0c0bb06b627003138{{name}}16b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  name: 'ImgButton',
  props: { 
    type: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: ''
    }
  }
}
2cacc6d41bbb37262a98f745aa00fbf0

c977fa5678fe78cf54b097005108eb8c
  .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;
    }
  }
531ac245ce3e4fe3d50054a55f265927

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!