Introduction à la méthode d'implémentation de boutons personnalisés dans Vue (avec code)

Ce que cet article vous apporte est une introduction à la méthode d'implémentation des boutons personnalisés dans Vue (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans les projets de développement réels, nous utiliserons parfois des boutons personnalisés car il y a de nombreuses pages dans un projet, afin d'unifier le style, nous réutiliserons plusieurs boutons identiques ou similaires. boutons Définir le composant bouton est pratique. Nous exportons le composant bouton défini et le référençons globalement, afin qu'il puisse être utilisé à volonté dans d'autres composants. Cela peut grandement améliorer notre efficacité de travail.

D'accord, sans plus tarder, voici le code :
img-button.vue//Ceci est notre composant de bouton personnalisé

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

Configuré dans router.js Route
est introduit dans main.js

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

et peut ensuite être utilisé dans d'autres composants

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

//Il est à noter que le composant bouton personnalisé ajoute un événement de clic. Assurez-vous de ajoutez .native car le modificateur .native est utilisé pour enregistrer les événements natifs des éléments plutôt que les événements personnalisés des composants

Cet article est partout ici Vous pouvez le suivre pour un contenu plus passionnant du site Web PHP chinois . Tutoriel vidéo JavaScriptcolonne ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!