sea-warning-web/src/components/cus/CusButton.vue

<template>
  <template v-if="type === 'main'">
    <el-button type="primary">{{ title }}</el-button>
  </template>
  <template v-else-if="type === 'table-add'">
    <div class="cus-table-button __hover">
      <SvgIcon :name="icon || 'add'" size="12" color="var(--cus-main-color)"/>{{ title || '新增' }}
    </div>
  </template>
  <template v-else-if="type === 'table'">
    <div class="cus-table-button __hover">
      <SvgIcon :name="icon" size="12" color="var(--cus-main-color)"/>{{ title }}
    </div>
  </template>
  <template v-else-if="type === 'table-edit'">
    <div class="cus-table-button __hover">
      <SvgIcon :name="icon || 'edit'" size="12" color="#4996FF"/>{{ title || '编辑' }}
    </div>
  </template>
  <template v-else-if="type === 'table-del'">
    <div class="cus-table-button table-del __hover">
      <SvgIcon :name="icon || 'del'" size="12" color="#f56c6c"/>{{ title || '删除' }}
    </div>
  </template>
  <template v-else-if="type === 'add'">
    <div class="cus-button add __hover">
      {{ title || '新增' }}
    </div>
  </template>
  <template v-else>
    <div class="cus-button __hover">
      {{ title }}
    </div>
  </template>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CusButton',
});
import {getCurrentInstance, reactive} from "vue";

const {proxy} = getCurrentInstance()
const props = defineProps({
  type: {},
  title: {},
  icon: {}
})
const state: any = reactive({})
</script>

<style lang="scss" scoped>
.el-button {
  &.el-button--primary:hover {
    background-color: rgba(var(--cus-main-color-rgb), 0.7);
    border-color: rgba(var(--cus-main-color-rgb), 0.7);
  }
}
.cus-table-button {
  height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  border: 1px solid #4996FF;
  padding: 0 8px;
  gap: 4px;
  font-weight: 400;
  font-size: 14px;
  color: #4996FF;
  &.table-del {
    border-color: #f56c6c;
    color: #f56c6c;
  }
}
.cus-button {
  height: 40px;
  padding: 0 16px;
  border-radius: 4px;
  background: #6DA3EF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  &.add {
    background-color: #2FBCCD;
  }
}
</style>