designer-hub/packages/app/src/components/button-evo.vue

<script setup lang="ts">
import { omit } from 'radash'

// const theme
interface ComponentProps {
  color?: string
  size?: 'lg' | 'md' | 'sm'
  location?: 'left' | 'right'
}
interface ButtonProps {
  block?: boolean
  disabled?: boolean
}
const props = withDefaults(
  defineProps<{ customClass?: string; skew?: boolean } & ComponentProps & ButtonProps>(),
  { color: 'primary', location: 'left' },
)
const emits = defineEmits<{ click: []; 'click.stop': [] }>()
const instance = getCurrentInstance()
const themeVars = { primary: '--evo-theme-primary' }
const btnThemeClass = { primary: 'before:bg-[--evo-theme-primary] after:bg-[--evo-theme-primary]' }

// const color = computed(() => (theme[props.color] ? theme[props.color] : props.color || 'black'))
const buttonProps = computed(() => omit(props, ['color']))
const btnClass = computed(
  () => `${btnThemeClass[props.color] || `before:bg-[--color] after:bg-[--color]`}`,
)
const height = computed(() => ({ lg: '2.75rem', md: '2.1875rem' })[props.size] || '2.75rem')
const handleClick = (event: Event) => {
  emits('click')
}
</script>
<template>
  <button
    class="relative bg-transparent hover:bg-transparent h-[--evo-btn-height]!"
    :class="`${btnClass} ${{ md: 'pl-7! pr-3.5!' }[size] || ''} skew skew-${location} ${disabled ? 'opacity-15!' : ''}`"
    :style="{ '--color': color, '--evo-btn-height': height }"
    :block="block"
    @click="handleClick"
  >
    <div
      class="w-full h-full flex items-center justify-center relative z-1 c-white"
      :class="`${{ md: 'text-sm' }[size] || ''}`"
    >
      <slot></slot>
    </div>
  </button>
</template>
<style lang="scss">
/* 左侧倾斜的按钮 */
// .skew {
//   &-right {
//     @apply right-skew;
//   }
// }
.left-skew {
  //   @apply bg-blue-500 text-white px-6 rounded text-center relative;
  //   clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
  //   transition: all 0.3s ease;
  @apply border-black  border-1 h-11 pl-8 pr-4.75 opacity-85 box-border border-red;
  &::before {
    @apply content-empty absolute top-0 right-5 bottom-0 left-1.25 skew-x-154 rounded-tl-1.25 rounded-bl-3.75;
  }
  &::after {
    @apply content-empty absolute top-0 right-0 bottom-0 left-6 w-auto h-auto rounded-2.5 b-none z-0 transform-none;
  }
  &:active {
    // @apply opacity-75;
  }
}
.skew {
  @apply border-black  border-1 h-11 pl-8 pr-4.75 opacity-85 box-border border-red;
}
.skew-left {
  &::before {
    @apply content-empty absolute top-0 right-5 bottom-0 left-1.25 skew-x-154 rounded-tl-1.25 rounded-bl-3.75;
  }
  &::after {
    @apply content-empty absolute top-0 right-0 bottom-0 left-6 w-auto h-auto rounded-2.5 b-none z-0 transform-none;
  }
}
.skew-right {
  @apply pl-4.75 pr-8;
  &::before {
    @apply content-empty absolute top-0 right-1.25 bottom-0 left-5 skew-x-154 rounded-tr-3.75 rounded-br-1.25 border-[#b5b5b5] border-solid;
  }
  &::after {
    @apply content-empty absolute top-0 right-6 bottom-0 left-0 w-auto h-auto rounded-2.5 rounded-tr-0 rounded-br-0 z-0 transform-none border-[#b5b5b5] b-1.5 border-solid border-r-0;
  }
}
</style>