4dkankan-components/packages/components/basic/button/src/button.vue

<template>
    <button class="ui-button" :class="className" :style="style">
        <UIIcon v-if="icon" :type="icon" class="ui-button-icon" />
        <slot />
    </button>
</template>

<script lang="ts" setup>
import { computed, defineProps } from 'vue'
import { normalizeUnitToStyle } from '@kankan-components/utils'
import UIIcon from '@kankan-components/components/basic/icon'
import { buttonProps } from './button'

defineOptions({
    name: 'UiButton',
})
const props = defineProps(buttonProps)

const custom = `customize`
const className = computed(() => (props.color ? custom : props.type))

const style = computed(() => {
    const style = {
        width: props.width ? normalizeUnitToStyle(props.width) : 'auto',
        '--color': '',
    }

    if (className.value === custom) {
        style['--color'] = props.color || ''
    }
    return style
})
</script>