|
@@ -0,0 +1,96 @@
|
|
|
|
+<script setup lang="ts">
|
|
|
|
+import type { TextProps } from './props'
|
|
|
|
+
|
|
|
|
+withDefaults(defineProps<TextProps>(), {
|
|
|
|
+ type: 'primary',
|
|
|
|
+ ripple: true,
|
|
|
|
+ size: '8px'
|
|
|
|
+})
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<!-- 状态点 -->
|
|
|
|
+<template>
|
|
|
|
+ <span
|
|
|
|
+ :class="[
|
|
|
|
+ 'dot',
|
|
|
|
+ { 'is-success': 'success' === type },
|
|
|
|
+ { 'is-warning': 'warning' === type },
|
|
|
|
+ { 'is-danger': 'danger' === type },
|
|
|
|
+ { 'is-info': 'info' === type },
|
|
|
|
+ { 'is-ripple': ripple }
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ <span class="dot-status" :style="{ width: size, height: size, background: color }">
|
|
|
|
+ <span class="dot-ripple" :style="{ width: size, height: size, background: color }"></span>
|
|
|
|
+ </span>
|
|
|
|
+ <span v-if="text" class="dot-text">{{ text }}</span>
|
|
|
|
+ </span>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.dot {
|
|
|
|
+ display: inline-flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .dot-text {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ margin-left: 8px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .dot-status {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ background: var(--el-color-primary);
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .dot-ripple {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background: var(--el-color-primary);
|
|
|
|
+ animation: animDot 1.2s ease-in-out infinite;
|
|
|
|
+ transform-origin: center;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &.is-ripple .dot-ripple {
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &.is-success .dot-status,
|
|
|
|
+ &.is-success .dot-ripple {
|
|
|
|
+ background: var(--el-color-success);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &.is-warning .dot-status,
|
|
|
|
+ &.is-warning .dot-ripple {
|
|
|
|
+ background: var(--el-color-warning);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &.is-danger .dot-status,
|
|
|
|
+ &.is-danger .dot-ripple {
|
|
|
|
+ background: var(--el-color-danger);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &.is-info .dot-status,
|
|
|
|
+ &.is-info .dot-ripple {
|
|
|
|
+ background: var(--el-color-info);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@keyframes animDot {
|
|
|
|
+ from {
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+ opacity: 0.6;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ to {
|
|
|
|
+ transform: scale(2.4);
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|