Skip to content

Instantly share code, notes, and snippets.

@SvenPam
Last active July 4, 2019 09:18
Show Gist options
  • Save SvenPam/8d0eacc45d1223d5a58ea269de2e7adb to your computer and use it in GitHub Desktop.
Save SvenPam/8d0eacc45d1223d5a58ea269de2e7adb to your computer and use it in GitHub Desktop.
TS Component Example
<template>
<small
v-if="diff !== 0"
:class="previous < current ? 'text-danger' : 'text-success'"
>
£{{ (previous - current) | format(0) }}
<template v-show="lastUpdated !== null">
vs
{{ formatDate(lastUpdated) }}
</template>
</small>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import SDiff from "@/components/SDiff.vue";
@Component
export default class SDiffText extends Vue {
@Prop({ default: 0 })
private previous!: number;
@Prop({ default: 0 })
private current!: number;
@Prop({ default: null })
private lastUpdated!: Date;
private get diff() {
return Math.round(this.previous - this.current);
}
private formatDate(date: string) {
const actualDate = new Date(date);
return actualDate
.toLocaleString("en-gb", {
month: "short",
year: "2-digit"
})
.toUpperCase();
}
}
</script>
<template>
<div>
<h1>What's the diff?</h1>
<s-diff-text
:previous="10"
:current="15"
:lastUpdated="2019-06-04"
></s-diff-text>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SDiffText from "@/components/SDiffText.vue";
@Component({
components: {
SDiffText
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment