charge-front/src/components/style-button/style-button.vue

<template>
  <button
    class="button ext-class"
    hover-class="none"
    :openType="openType"
    :style="{
      display: `var(--display-${size})`,
      width: `var(--width-${size})`,
      height: `${height ? height + 'rpx' : 'var(--height-' + size + ')'}`,
      'background-color': `var(--bg-${type}${border ? '-border' : ''})`,
      color: `var(--color-${type}${border ? '-border' : ''})`,
      'border-color': `var(--border-${type}${border ? '-border' : ''})`,
      'font-size': `var(--fs-${size})`,
      'border-radius': `var(--height-${size})`,
      'font-weight': 500,
    }"
    @click.stop="$emit('click')"
  >
    <slot></slot>
  </button>
</template>

<script lang="ts">
export default {
  emits: ["click"],
  options: {
    virtualHost: true,
  },
  externalClasses: ["ext-class"],
  props: {
    type: {
      type: String,
      default: "default",
    },
    size: {
      type: String,
      default: "medium", // 'medium' 'small'
    },
    border: Boolean,
    openType: String,
    height: String,
  },
};
</script>

<style lang="scss">
button::after {
  content: "";
  border: none;
}

.button {
  --bg-default: #ffffff;
  --bg-primary: #2d9e95;
  --bg-warning: #ff9900;
  --bg-error: red;
  --color-default: #666666;
  --color-primary: #ffffff;
  --color-warning: #ffffff;
  --color-error: #ffffff;
  --border-default: #999999;
  --border-primary: #2d9e95;
  --border-warning: #ff9900;
  --border-error: red;

  --bg-default-border: #ffffff;
  --bg-primary-border: #ffffff;
  --bg-warning-border: #ffffff;
  --bg-error-border: #ffffff;
  --color-default-border: #666666;
  --color-primary-border: #2d9e95;
  --color-warning-border: #ff9900;
  --color-error-border: red;
  --border-default-border: #666666;
  --border-primary-border: #2d9e95;
  --border-warning-border: #ff9900;
  --border-error-border: red;

  --display-medium: flex;
  --display-small: inline-flex;
  --height-medium: 96rpx;
  --height-small: 82rpx;
  --width-medium: 100%;
  --width-small: 100%;
  --fs-medium: 32rpx;
  --fs-small: 30rpx;

  position: relative;
  justify-content: center;
  align-items: center;
  line-height: normal;
  padding: 0;
  margin: 0;
  margin-right: 0;
  margin-left: 0;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
}
</style>