132 lines
2.8 KiB
Vue
132 lines
2.8 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<div class="card">
|
|
<t-cell title="缓存有效期" arrow @click="pickerVisible = true">
|
|
<span v-text="humanized" />
|
|
</t-cell>
|
|
</div>
|
|
|
|
<div class="bar">
|
|
<button type="button" class="btn" @click="sheetVisible = true" v-text="'打开底部弹层'" />
|
|
</div>
|
|
|
|
<p class="status" v-text="`弹层最近一次操作：${lastAction}`" />
|
|
|
|
<space size="small" class="tags">
|
|
<span v-for="item in 3" :key="item" class="tag" v-text="`标签 ${item}`" />
|
|
</space>
|
|
|
|
<t-popup v-model="pickerVisible" placement="bottom" destroy-on-close>
|
|
<div class="picker-panel">
|
|
<duration-picker v-model="durationMs" @change="pickerVisible = false" />
|
|
</div>
|
|
</t-popup>
|
|
|
|
<bottom-popup
|
|
v-model="sheetVisible"
|
|
title="选择操作"
|
|
@left-button-click="onAction('取消')"
|
|
@right-button-click="onAction('确定')"
|
|
>
|
|
<div class="sheet-content">
|
|
<p v-text="'底部弹层适合承载一组操作或一段简短表单。'" />
|
|
</div>
|
|
</bottom-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from "vue";
|
|
import { BottomPopup, DurationPicker, Space } from "timi-tdesign-mobile";
|
|
|
|
/**
|
|
* 本场景是移动端最典型的两种浮现方式：整块选择面板用 `t-popup` 从底部升起，
|
|
* 操作确认用 BottomPopup。
|
|
*/
|
|
const durationMs = ref(1000);
|
|
const pickerVisible = ref(false);
|
|
const sheetVisible = ref(false);
|
|
const lastAction = ref("无");
|
|
|
|
/** 把毫秒换算成便于阅读的形式。 */
|
|
const humanized = computed(() => {
|
|
const value = durationMs.value;
|
|
if (value % (60 * 60 * 1000) === 0) {
|
|
return `${value / (60 * 60 * 1000)} 小时`;
|
|
}
|
|
if (value % (60 * 1000) === 0) {
|
|
return `${value / (60 * 1000)} 分钟`;
|
|
}
|
|
if (value % 1000 === 0) {
|
|
return `${value / 1000} 秒`;
|
|
}
|
|
return `${value} 毫秒`;
|
|
});
|
|
|
|
function onAction(action: string) {
|
|
lastAction.value = action;
|
|
sheetVisible.value = false;
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo {
|
|
.card {
|
|
overflow: hidden;
|
|
margin-bottom: .75rem;
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.bar {
|
|
margin-bottom: .75rem;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: .5rem;
|
|
font-size: .8125rem;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: .5rem;
|
|
color: #fff;
|
|
background: var(--vp-c-brand-1);
|
|
}
|
|
|
|
.status {
|
|
margin: 0 0 .75rem;
|
|
font-size: .75rem;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
|
|
.tags {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tag {
|
|
padding: .25rem .5rem;
|
|
font-size: .6875rem;
|
|
border-radius: .25rem;
|
|
color: var(--vp-c-brand-1);
|
|
background: var(--vp-c-default-soft);
|
|
}
|
|
|
|
.picker-panel {
|
|
padding-top: .5rem;
|
|
border-radius: 1rem 1rem 0 0;
|
|
background: var(--vp-c-bg);
|
|
}
|
|
|
|
.sheet-content {
|
|
padding: 1rem;
|
|
|
|
p {
|
|
margin: 0;
|
|
font-size: .8125rem;
|
|
line-height: 1.6;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
}
|
|
}
|
|
</style>
|