文件操作 - AppButton.vue

文件: /var/www/OLD/components/AppButton.vue

编辑文件内容

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  href?: string;
  to?: string | {};
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
}>();

const componentTag = computed(() => {
  if (props.href) return 'a';
  if (props.to) return 'NuxtLink';
  return 'button';
});
</script>

<template>
  <component
    :is="componentTag"
    class="btn"
    :href="href"
    :to="to"
    :class="{ disabled: disabled }"
    v-bind="
      componentTag === 'button' ? { type: type ?? 'button', disabled } : {}
    "
  >
    <slot></slot>
  </component>
</template>

<style lang="less" scoped>
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  background-color: @link;
  padding: 0 32px;
  transition: background-color 0.4s, opacity 0.4s;
  max-width: 100%;
  border-radius: 6px;
  border: 0;
  flex: none;
  color: @white;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  @media @md {
    padding: 0 24px;
  }
  &:hover {
    background-color: @linkH;
  }
  &:active {
    background-color: @linkA;
  }
  &[disabled],
  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }
}

.btn-small {
  height: 48px;
  @media @md {
    height: 42px;
    font-size: 15px;
  }
}
</style>

修改文件时间

删除文件