shoot-miniprograms/src/components/SButton.vue

<script setup>
const props = defineProps({
  width: {
    type: String,
    default: "calc(100vw - 20px)",
  },
  rounded: {
    type: Number,
    default: 10,
  },
  onClick: {
    type: Function,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <button
    class="sbtn"
    hover-class="none"
    :style="{
      width: width,
      borderRadius: rounded + 'px',
      backgroundColor: disabled ? '#757575' : '#fed847',
    }"
    open-type="getUserInfo"
    @click="
      () => {
        if (!disabled) onClick();
      }
    "
  >
    <slot />
  </button>
</template>

<style scoped>
.sbtn {
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}
</style>