Vue에서 사용자 정의 버튼을 구현하는 방법 소개(코드 포함)

이 글은 Vue에서 (코드 포함) 사용자 정의 버튼을 구현하는 방법을 소개합니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

실제 개발 프로젝트에서는 가끔 커스텀 버튼을 사용하는데, 프로젝트에는 페이지가 많고, 스타일을 통일하기 위해 동일하거나 유사한 버튼을 많이 재사용하게 되는데, 이때 커스텀 버튼 컴포넌트가 바로 그것입니다. 정의된 버튼 구성 요소를 내보내고 전역적으로 참조하므로 이를 다른 구성 요소에서 자유롭게 사용할 수 있으므로 작업 효율성이 크게 향상됩니다.

자, 더 이상 고민하지 말고 코드는 다음과 같습니다.
img-button.vue//이것은 우리의 사용자 정의 버튼 구성 요소입니다

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

router.js에서 경로를 구성하세요
main.js에서 소개하세요

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

그런 다음 사용할 수 있습니다 it in other Components

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

//커스텀 버튼 컴포넌트에 클릭 이벤트를 추가할 때 .native 수식자를 사용하여 컴포넌트의 커스텀 이벤트가 아닌 해당 요소의 네이티브 이벤트를 등록하므로 주의할 점은 .native 를 추가해야 한다는 점입니다.

이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Video Tutorial 칼럼을 주목하세요! ! !

위 내용은 Vue에서 사용자 정의 버튼을 구현하는 방법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!