layui/src/module/button/index.vue

<script lang="ts">
export default {
  name: "LayButton",
};
</script>

<script setup lang="ts">
import "./index.less";
import { computed } from "vue";

export interface LayButtonProps {
  type?: "primary" | "normal" | "warm" | "danger";
  size?: "lg" | "sm" | "xs";
  fluid?: boolean;
  radius?: boolean;
  border?: "green" | "blue" | "orange" | "red" | "black";
  disabled?: boolean;
  loading?: boolean;
  nativeType?: "button" | "submit" | "reset";
}

const props = withDefaults(defineProps<LayButtonProps>(), {
  fluid: false,
  radius: false,
  disabled: false,
  loading: false,
  nativeType: "button",
});

const classes = computed(() => {
  return [
    props.type ? `layui-btn-${props.type}` : "",
    props.size ? `layui-btn-${props.size}` : "",
    props.border ? `layui-border-${props.border}` : "",
  ];
});
</script>

<template>
  <button
    class="layui-btn"
    :class="[
      {
        'layui-btn-fluid': fluid,
        'layui-btn-radius': radius,
        'layui-btn-disabled': disabled
      },
      classes,
    ]"
    :type="nativeType"
  >
    <i
      v-if="loading"
      class="
        layui-icon
        layui-icon-loading-1
        layui-anim
        layui-anim-rotate
        layui-anim-loop
      "
    ></i>
    <slot v-else />
  </button>
</template>