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
| <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>
|
|
