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

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

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

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!