65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<duration-picker v-model="duration" @change="onChange" />
|
|
|
|
<div class="result">
|
|
<p class="value" v-text="`${duration} ms`" />
|
|
<p class="text" v-text="humanized" />
|
|
<p class="text" v-text="`变更次数：${changeCount}`" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from "vue";
|
|
import { DurationPicker } from "timi-tdesign-mobile";
|
|
|
|
const duration = ref(1000);
|
|
const changeCount = ref(0);
|
|
|
|
/** 把毫秒换算成便于阅读的形式，仅用于演示展示。 */
|
|
const humanized = computed(() => {
|
|
const value = duration.value;
|
|
if (value < 1000) {
|
|
return `${value} 毫秒`;
|
|
}
|
|
if (value < 60_000) {
|
|
return `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 2)} 秒`;
|
|
}
|
|
if (value < 3600_000) {
|
|
return `${(value / 60_000).toFixed(2)} 分钟`;
|
|
}
|
|
if (value < 86400_000) {
|
|
return `${(value / 3600_000).toFixed(2)} 小时`;
|
|
}
|
|
return `${(value / 86400_000).toFixed(2)} 天`;
|
|
});
|
|
|
|
function onChange() {
|
|
changeCount.value += 1;
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo {
|
|
.result {
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.value {
|
|
margin: 0 0 .25rem;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--vp-c-brand-1);
|
|
}
|
|
|
|
.text {
|
|
margin: 0 0 .25rem;
|
|
font-size: .75rem;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
}
|
|
</style>
|