compdfkit_web_cn/components/LinkButton.vue

<template>
  <a
    :class="[
      'flex',
      'justify-center',
      'items-center',
      'rounded-6px',
      primary ? 'link-primary' : 'link',
      disabled && 'cursor-not-allowed',
      underline && !disabled && 'underline',
      type === 'plain' && 'lg:hover:bg-[#548CF9] <lg:active:bg-[#548CF9]',
      type === 'border' && 'lg:hover:bg-brand-0 lg:hover:text-white <lg:active:bg-brand-0 <lg:active:text-white',
      type === 'borderBgWhite' && 'lg:hover:border-1px lg:hover:border-solid lg:hover:border-[#397DFF] lg:hover:text-brand-0 <lg:active:border-1px <lg:active:border-solid <lg:active:border-[#397DFF] <lg:active:text-brand-0',
      type === 'bgWhite' && 'bg-white lg:hover:bg-white/80 <lg:active:bg-white/80',
      type === 'borderWhite' && 'border border-white text-white lg:hover:bg-white lg:hover:text-brand-0 <lg:active:bg-white <lg:active:text-brand-0'
    ]"
    :href="disabled ? null : href"
  >

    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon" /></template>

    <span
      v-if="$slots.default"
      :class="[
        'block',
        bold && 'lg:font-bold'
      ]"
    >
      <slot />
    </span>
    <slot name="dynamic"></slot>
  </a>
</template>

<script>

export default {
  props: {
    type: {
      type: String,
      default: 'default'
    },
    primary: {
      type: Boolean,
      default: false
    },
    underline: {
      type: Boolean,
      default: false
    },
    bold: {
      type: Boolean,
      default: false
    },
    disabled: Boolean,
    href: String
  }
}
</script>

<style lang="scss" scoped>
  .link-primary {
    width: 100%;
    max-width: 138px;
    height: 42px;
  }
  .link {
    width: 100%;
    height: 54px;
  }
  .dynamic {
    span {
      font-weight: bold;
    }
    .dynamic-icon {
      position: relative;
      width: 16px;
      height: 16px;
      margin-left: 8px;

      &::after,
      &::before {
        position: absolute;
        transition: all 0.25s ease-out;
        box-sizing: border-box;
        border-top: 2px solid #FFFFFF;
      }

      &::before {
        content: '';
        width: 8px;
        height: 8px;
        border-left: 2px solid #FFFFFF;
        right: 1px;
        top: 50%;
        transform: translateY(-50%) rotate(135deg);
      }

      &::after {
        content: '';
        width: 11px;
        height: 2px;
        left: -1px;
        top: 50%;
        transform: translateY(-50%) rotate(-65deg);
      }
    }

    &:hover {
      .dynamic-icon {
        &::after {
          transform: translateY(-50%);
          left: 3px;
        }
      }
    }
  }
  .dynamic-text .dynamic-icon {
    &::before, &::after {
      border-color: #1460F3;
    }
  }
</style>