proginn-frontend/components/t-level-tag.vue

<template>
  <a
    @click="clickItem($event)"
    href="/frontend/skill_cert/profile"
    target="view_window"
    :style="{
      width: width + 'px',
      height: height + 'px'
    }"
    class="t-user-level"
    :class="'t-level-' + level"
  ></a>
</template>

<script>
export default {
  props: {
    level: {
      default: 0,
      type: Number
    },
    width: {
      default: 26,
      type: Number
    },
    height: {
      default: 15,
      type: Number
    },
    isLink:{
      type:Boolean,
      default:false
    }
  },
  methods:{
    clickItem(e){
      if(!this.isLink) {
        // debugger
        // e.stopPropagation();
        e.preventDefault()
        return false
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@for $i from 1 through 7 {
  .t-level-#{$i} {
    background-image: url("~@/assets/img/t_level/T#{$i}@3x.png");
  }
}

.t-user-level {
  width: 26px;
  height: 15px;
  display: inline-block;
  background-size: 100% auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: baseline;
}
</style>