mirror of https://github.com/rancher/dashboard.git
101 lines
1.5 KiB
Vue
101 lines
1.5 KiB
Vue
<script>
|
|
|
|
export default {
|
|
props: {
|
|
tagName: {
|
|
type: String,
|
|
default: 'div',
|
|
},
|
|
|
|
min: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
|
|
max: {
|
|
type: Number,
|
|
default: 100,
|
|
},
|
|
|
|
decimals: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
|
|
prefix: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
suffix: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
interval: {
|
|
type: Number,
|
|
default: 5000,
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
return { label: this.update(), value: 0 };
|
|
},
|
|
|
|
beforeDestroy() {
|
|
clearTimeout(this.timer);
|
|
},
|
|
|
|
methods: {
|
|
update() {
|
|
const base = ( Math.random() * (this.max - this.min)) + this.min;
|
|
const factor = 10 ** this.decimals;
|
|
const value = Math.round(base * factor) / factor;
|
|
|
|
const label = (this.prefix || '') + value + (this.suffix || '');
|
|
|
|
if ( this.label !== label ) {
|
|
this.label = label;
|
|
this.value = value;
|
|
}
|
|
|
|
this.timer = setTimeout(() => {
|
|
this.update();
|
|
}, this.interval);
|
|
|
|
return this.label;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="tagName"
|
|
v-bind="$attrs"
|
|
class="container"
|
|
>
|
|
<slot
|
|
:data="value"
|
|
:min="min"
|
|
:max="max"
|
|
:interval="interval"
|
|
/>
|
|
{{ label }}
|
|
</component>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.container{
|
|
display: flex;
|
|
padding: 5px;
|
|
padding-right: 0;
|
|
height: 80%;
|
|
align-items: center
|
|
}
|
|
span {
|
|
display:block;
|
|
}
|
|
</style>
|