1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <script setup lang="ts">
| import type { CSSProperties } from 'vue';
|
| import { computed, ref, useTemplateRef } from 'vue';
|
| const props = defineProps<{
| barStyle: CSSProperties;
| toLeft: boolean;
| }>();
|
| const barRef = useTemplateRef<HTMLDivElement>('barRef');
|
| const width = ref('0');
|
| const style = computed(() => {
| const { barStyle } = props;
| return {
| ...barStyle,
| width: width.value,
| };
| });
|
| defineExpose({
| getEl: () => {
| return barRef.value;
| },
| setWidth: (val: string) => {
| width.value = val;
| },
| });
| </script>
|
| <template>
| <div
| ref="barRef"
| :class="toLeft && 'transition-width !w-0 duration-300'"
| :style="style"
| class="bg-success absolute h-full"
| ></div>
| </template>
|
|
