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

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

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

defineOptions({
    name: 'UIMessage',
})
const props = defineProps({
    type: {
        type: String,
        default: 'normal',
    },
    color: {
        type: String,
    },
    width: {
        type: [String, Number],
    },
    icon: {
        type: String,
    },
})

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

const style = computed(() => {
    const style = {
        width: normalizeUnitToStyle(props.width),
    }

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