49 lines
998 B
Plaintext
49 lines
998 B
Plaintext
<script lang="ts">
|
|
export default {
|
|
name: "LayBadge",
|
|
};
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, StyleValue } from "vue";
|
|
import "./index.less";
|
|
|
|
export interface BadgeProps {
|
|
type?: "dot" | "rim";
|
|
theme?: string;
|
|
color?: string;
|
|
ripple?: boolean;
|
|
}
|
|
|
|
const props = defineProps<BadgeProps>();
|
|
|
|
const classes = computed(() => {
|
|
return [
|
|
{
|
|
"layui-badge": !props.type,
|
|
"layui-badge-dot": props.type == "dot",
|
|
"layui-badge-rim": props.type == "rim",
|
|
"layui-badge-dot-ripple": props.ripple,
|
|
},
|
|
`layui-bg-${props.theme}`,
|
|
];
|
|
});
|
|
|
|
const styles = computed<StyleValue>(() => {
|
|
return [props.color ? `background-color: ${props.color}` : ""];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span :class="classes" :style="styles">
|
|
<span
|
|
v-if="type === 'dot'"
|
|
:class="props.theme ? `layui-bg-${props.theme}` : ``"
|
|
:style="styles ?? `background-color: #ff5722;`"
|
|
>
|
|
</span>
|
|
|
|
<slot v-if="type != 'dot'"></slot>
|
|
</span>
|
|
</template>
|