How can I init props with <script setup lang="ts">?
Sep 22nd 2020
Version
3.0.0
Reproduction link
https://jsfiddle.net/r3dge1o7/
<script setup="props" lang="ts">
type HiButtonType = 'primary' | 'warning' | 'default';
declare const props: {
type?: HiButtonType;
};
props.type = props.type || 'primary';
</script>
Steps to reproduce
declare const props:{type: string}; props.type = props.type || 'test';
What is expected?
cant init props column.
What is actually happening?
How init prop?
Sep 22nd 2020
Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.
Sep 22nd 2020
Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.
Thanks, But not just a question. Now is strange to define a default value for props. finally, I only define a default CONST and add a lot of redundancy logic in and computed like bellow:
<template>
<div class="hi-loading-carousel">
<svg
xmlns="http://www.w3.org/2000/svg"
:viewBox="viewBox"
:fill="color || DEF_COLOR"
:style="{ width: `${viewWidth}px`, height: `${size || DEF_SIZE}px` }"
class="hi-loading-svg carouseling"
>
<HiLoadingCarouselCircle
v-for="(value, index) in circleAnimateValues"
:key="`carousel-circle-${index}`"
:size="size || DEF_SIZE"
:index="index"
:animate-values="value"
></HiLoadingCarouselCircle>
</svg>
</div>
</template>
<script setup="props, { emit }" lang="ts">
import { computed, ref } from 'vue';
export { default as HiLoadingCarouselCircle } from './carousel-circle.vue';
declare const props: {
size?: number;
color?: string;
};
export const DEF_SIZE = 15;
export const DEF_COLOR = '#2F86F6';
export const circleAnimateValues = ref([
[1, 0.8, 0.6, 0.6, 0.6, 0.8, 1],
[0.6, 0.8, 1, 0.8, 0.6, 0.6, 0.6],
[0.6, 0.6, 0.6, 0.8, 1, 0.8, 0.6]
]);
export const viewWidth = computed(() => {
const size = props.size || DEF_SIZE;
const len = circleAnimateValues.value.length;
return len * size + ((len - 1) * size) / 2;
});
export const viewBox = computed(() => {
return `0 0 ${viewWidth.value} ${props.size || DEF_SIZE}`;
});
</script>