client: refactor components/ripple.vue to composition API

This commit is contained in:
Johann150 2022-09-30 17:57:06 +02:00
parent f571f61c2d
commit be19ea610f
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1

View file

@ -56,33 +56,28 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as os from '@/os';
export default defineComponent({
props: {
x: {
type: Number,
required: true,
},
y: {
type: Number,
required: true,
},
particle: {
type: Boolean,
required: false,
default: true,
},
},
emits: ['end'],
setup(props, context) {
const particles = [];
const origin = 64;
const colors = ['#FF1493', '#00FFFF', '#FFE202'];
const props = withDefaults(defineProps<{
x: number;
y: number;
particle?: boolean;
}>(), {
particle: true,
});
if (props.particle) {
const emit = defineEmits<{
(ev: 'end'): void;
}>();
const zIndex = os.claimZIndex('high');
const particles = [];
const origin = 64;
const colors = ['#FF1493', '#00FFFF', '#FFE202'];
if (props.particle) {
for (let i = 0; i < 12; i++) {
const angle = Math.random() * (Math.PI * 2);
const pos = Math.random() * 16;
@ -96,19 +91,12 @@ export default defineComponent({
color: colors[Math.floor(Math.random() * colors.length)],
});
}
}
}
onMounted(() => {
onMounted(() => {
window.setTimeout(() => {
context.emit('end');
emit('end');
}, 1100);
});
return {
particles,
zIndex: os.claimZIndex('high'),
};
},
});
</script>