noob-components/packages/base/item/button.vue

<template>
    <el-button :class="type || state.style.name" :size="state.size.size" :type="type" :icon="icon" :disabled="disabled"
        :plain="plain" :round="round" :circle="circle" :loading="loading" :text="text" :link="link">
        <slot v-if="hasSlotContent" />
    </el-button>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, useSlots, computed } from "vue";
const { state } = useStore();
const slots = useSlots();

const prop = defineProps({
    type: {
        type: String,
        default: null
    },
    icon: {
        type: String,
        default: null
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    plain: {
        type: Boolean,
        default: false,
    },
    round: {
        type: Boolean,
        default: false,
    },
    circle: {
        type: Boolean,
        default: false,
    },
    loading: {
        type: Boolean,
        default: false,
    },
    text: {
        type: Boolean,
        default: false,
    },
    link: {
        type: Boolean,
        default: false,
    }
});

const hasSlotContent = computed(() => {
  if (!slots.default) return false;
  const content = slots.default();
  // Filter out comments and empty text nodes
  const meaningfulContent = content.filter(vnode => {
    // Comment nodes
    if (vnode.type === Symbol.for('v-cmt')) return false;
    // Text nodes that are empty or whitespace only
    if (vnode.type === Symbol.for('v-txt') && (!vnode.children || String(vnode.children).trim() === '')) return false;
    return true;
  });
  return meaningfulContent.length > 0;
});

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.dark {
    --el-button-bg-color: v-bind('state.style.itemBg');
    --el-button-border-color: v-bind('state.style.itemBg');
    --el-button-text-color: v-bind('state.style.color');
    --el-button-hover-bg-color: v-bind('state.style.itemBg');
    --el-button-hover-border-color: v-bind('state.style.itemBg');
    --el-button-hover-text-color: v-bind('state.style.color');
}
</style>
<style>
/* Global style to fix icon centering in circle buttons by hiding empty slot spans */
.el-button.is-circle > span[class=""] {
  display: none !important;
}
</style>