90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="u-time-axis-item" :class="customClass" :style="$u.toStyle(customStyle)">
|
|||
|
|
<slot name="content" />
|
|||
|
|
<view class="u-time-axis-node" :style="[nodeStyle]">
|
|||
|
|
<slot name="node">
|
|||
|
|
<view class="u-dot"> </view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-time-line-item',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { computed } from 'vue';
|
|||
|
|
import { TimeLineItemProps } from './types';
|
|||
|
|
import { $u } from '../../';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* timeLineItem 时间轴Item
|
|||
|
|
* @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
|
|||
|
|
* @tutorial https://uviewpro.cn/zh/components/timeLine.html
|
|||
|
|
* @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认var(--u-bg-white)）
|
|||
|
|
* @property {String | Number} node-top 节点左边图标绝对定位的top值，单位rpx
|
|||
|
|
* @example <u-time-line-item node-top="2">...</u-time-line-item>
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 节点的背景颜色
|
|||
|
|
*/
|
|||
|
|
const props = defineProps(TimeLineItemProps);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算节点样式
|
|||
|
|
* @returns 节点样式对象
|
|||
|
|
*/
|
|||
|
|
const nodeStyle = computed(() => {
|
|||
|
|
// 生成节点样式对象
|
|||
|
|
const style: Record<string, string> = {
|
|||
|
|
backgroundColor: props.bgColor
|
|||
|
|
};
|
|||
|
|
// 如果设置了 nodeTop，则添加 top 属性
|
|||
|
|
if (props.nodeTop !== '') style.top = String(props.nodeTop) + 'rpx';
|
|||
|
|
return style;
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import '../../libs/css/style.components.scss';
|
|||
|
|
|
|||
|
|
.u-time-axis-item {
|
|||
|
|
@include vue-flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-time-axis-node {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12rpx;
|
|||
|
|
left: -40rpx;
|
|||
|
|
transform-origin: 0;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
@include vue-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 1;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-dot {
|
|||
|
|
height: 16rpx;
|
|||
|
|
width: 16rpx;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
background: var(--u-divider-color);
|
|||
|
|
}
|
|||
|
|
</style>
|