big-model-web/src/components/czr-ui/CzrButton.vue

<template>
  <div style="display: flex; align-items: center">
    <template v-if="type == 'table'">
      <div class="czr-button-table __hover">{{ title }}</div>
    </template>
    <template v-else-if="type == 'table-del'">
      <div class="czr-button-table _del __hover">{{ title || '删除' }}</div>
    </template>
    <template v-else-if="type == 'export'">
      <div class="czr-button __hover">
        <SvgIcon name="czr_export" color="var(--czr-main-color)" />{{
          title || '导出'
        }}
      </div>
    </template>
    <template v-else-if="type == 'add'">
      <div class="czr-button _add __hover">
        <SvgIcon name="czr_add2" color="#fffff" />{{ title || '新增' }}
      </div>
    </template>
    <template v-else-if="type == 'del'">
      <div class="czr-button __hover del">
        <SvgIcon :name="icon || 'czr_del'" color="var(--czr-error-color)" />{{
          title || '删除'
        }}
      </div>
    </template>
    <template v-else-if="type == 'primary'">
      <div class="czr-button __hover primary">
        <SvgIcon
          v-if="icon"
          :name="icon"
          color="#ffffff"
          :rotate="rotate"
          :size="size"
        />
        {{ title }}
      </div>
    </template>
    <template v-else-if="type == 'normal'">
      <div class="czr-button __hover normal">
        <SvgIcon
          v-if="icon"
          :name="icon"
          color="var(--czr-main-color)"
          :rotate="rotate"
          :size="size"
        />
        {{ title }}
      </div>
    </template>
    <template v-else>
      <div class="czr-button __hover">
        <SvgIcon v-if="icon" :name="icon" :rotate="rotate" />{{ title }}
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrButton',
})
const props = defineProps({
  type: {},
  title: {},
  icon: {},
  rotate: { default: 0 },
  size: { default: 12 },
})
</script>

<style lang="scss" scoped>
.czr-button {
  width: fit-content;
  height: 2rem;
  background: #ffffff;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border: 0.06rem solid #c0c4cc;
  font-weight: 400;
  font-size: 0.88rem;
  color: #606266;
  line-height: 1;
  word-break: keep-all;
  .svg-icon {
    margin-right: 6px;
  }
  &.del {
    background: rgba(var(--czr-error-color-rgb), 0.1);
    border-color: rgba(var(--czr-error-color-rgb), 1);
    color: var(--czr-error-color);
  }
  &._add {
    color: #ffffff;
    background-color: var(--czr-main-color);
    border-color: var(--czr-main-color);
  }
  &.primary {
    background: var(--czr-main-color);
    border-color: var(--czr-main-color);
    color: #ffffff;
  }
  &.normal {
    background: #ffffff;
    border-color: var(--czr-main-color);
    color: var(--czr-main-color);
  }
}
.czr-button-table {
  font-weight: 400;
  font-size: 14px;
  color: var(--czr-main-color);
  &._del {
    color: var(--czr-error-color);
  }
}
</style>