Added tooltip
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-card height="230" width="350" v-if="data !== undefined">
|
||||
<v-card width="350" v-if="data !== undefined">
|
||||
<v-list-item three-line>
|
||||
<v-list-item-content>
|
||||
<v-card-title class="d-inline-block text-truncate pt-0 px-0">{{
|
||||
@@ -31,20 +31,26 @@
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-row justify="space-around">
|
||||
<v-col class="text-center" v-for="i in 5" :key="i">
|
||||
<v-col class="text-center pb-0" v-for="i in 5" :key="i">
|
||||
<div>{{ getMoment(data.hourly[i * 3].dt, "HH:mm") }}</div>
|
||||
<div>
|
||||
<v-img
|
||||
:src="
|
||||
'http://openweathermap.org/img/wn/' +
|
||||
data.hourly[i * 3].weather[0].icon +
|
||||
'.png'
|
||||
"
|
||||
height="40"
|
||||
width="40"
|
||||
></v-img>
|
||||
</div>
|
||||
<div class="text-center">{{ Math.round(data.hourly[i * 3].temp) }} °C</div>
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-img
|
||||
:src="
|
||||
'http://openweathermap.org/img/wn/' +
|
||||
data.hourly[i * 3].weather[0].icon +
|
||||
'.png'
|
||||
"
|
||||
height="40"
|
||||
width="40"
|
||||
class="mx-auto"
|
||||
v-on="on"
|
||||
></v-img>
|
||||
</template>
|
||||
<span>{{ data.hourly[i * 3].weather[0].description }}</span>
|
||||
</v-tooltip>
|
||||
|
||||
<div>{{ Math.round(data.hourly[i * 3].temp) }} °C</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
@@ -55,7 +61,7 @@
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import axios from "axios";
|
||||
const moment = require('moment');
|
||||
const moment = require("moment");
|
||||
|
||||
@Component
|
||||
export default class City extends Vue {
|
||||
@@ -63,7 +69,7 @@ export default class City extends Vue {
|
||||
|
||||
private created() {
|
||||
this.getData();
|
||||
setInterval(this.getData, 1000*60);
|
||||
setInterval(this.getData, 1000 * 60);
|
||||
}
|
||||
|
||||
private getData() {
|
||||
|
||||
Reference in New Issue
Block a user