feat: add timeline

This commit is contained in:
xiaoxian521 2022-03-05 20:53:36 +08:00
parent c749149c2f
commit 7f5aeed4d1
7 changed files with 156 additions and 3 deletions

View File

@ -0,0 +1,39 @@
.point {
width: var(--point-width);
height: var(--point-height);
background: var(--point-background);
position: relative;
border-radius: var(--point-border-radius);
}
.point-flicker:after {
background: var(--point-background);
}
.point-flicker:before,
.point-flicker:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
border-radius: var(--point-border-radius);
animation: flicker 1.2s ease-out infinite;
}
@keyframes flicker {
0% {
transform: scale(0.5);
opacity: 1;
}
30% {
opacity: 1;
}
100% {
transform: scale(var(--point-scale));
opacity: 0;
}
}

View File

@ -0,0 +1,44 @@
import "./index.css";
import { h, defineComponent, Component } from "vue";
export interface attrsType {
width?: string;
height?: string;
borderRadius?: number | string;
background?: string;
scale?: number | string;
}
/**
*
* @param width string
* @param height string
* @param borderRadius number | string 050%
* @param background string
* @param scale number | string 2
* @returns Component
*/
export function useRenderFlicker(attrs?: attrsType): Component {
return defineComponent({
name: "Flicker",
render() {
return h(
"div",
{
class: "point point-flicker",
style: {
"--point-width": attrs?.width ?? "12px",
"--point-height": attrs?.height ?? "12px",
"--point-background":
attrs?.background ?? "var(--el-color-primary)",
"--point-border-radius": attrs?.borderRadius ?? "50%",
"--point-scale": attrs?.scale ?? "2"
}
},
{
default: () => []
}
);
}
});
}

View File

@ -50,6 +50,8 @@ import {
ElColorPicker,
ElSelect,
ElOption,
ElTimeline,
ElTimelineItem,
// 指令
ElLoading,
ElInfiniteScroll
@ -108,7 +110,9 @@ const components = [
ElLink,
ElColorPicker,
ElSelect,
ElOption
ElOption,
ElTimeline,
ElTimelineItem
];
export function useElementPlus(app: App) {

View File

@ -46,5 +46,6 @@ export default {
hsResult: "Result Page",
hsSuccess: "Success Page",
hsFail: "Fail Page",
hsIconSelect: "Icon Select"
hsIconSelect: "Icon Select",
hsTimeline: "Time Line"
};

View File

@ -46,5 +46,6 @@ export default {
hsResult: "结果页面",
hsSuccess: "成功页面",
hsFail: "失败页面",
hsIconSelect: "图标选择器"
hsIconSelect: "图标选择器",
hsTimeline: "时间线"
};

View File

@ -48,6 +48,15 @@ const ableRouter = {
title: $t("menus.hsIconSelect"),
i18n: true
}
},
{
path: "/able/timeline",
name: "reTimeline",
component: () => import("/@/views/able/timeline.vue"),
meta: {
title: $t("menus.hsTimeline"),
i18n: true
}
}
]
};

View File

@ -0,0 +1,55 @@
<script setup lang="ts">
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useRenderFlicker } from "/@/components/ReFlicker";
// eslint-disable-next-line no-undef
const { lastBuildTime } = __APP_INFO__;
const activities = [
{
content: "支持圆点闪动",
timestamp: lastBuildTime,
icon: useRenderFlicker()
},
{
content: "支持方形闪动",
timestamp: lastBuildTime,
icon: useRenderFlicker({ borderRadius: 0, background: "#67C23A" })
},
{
content: "支持默认颜色",
timestamp: lastBuildTime
},
{
content: "支持自定义颜色",
timestamp: lastBuildTime,
color: "#F56C6C"
},
{
content: "支持自定义图标",
timestamp: lastBuildTime,
icon: useRenderIcon("iphone", {
color: "#0bbd87"
})
}
];
</script>
<template>
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium">时间线</span>
</div>
</template>
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:color="activity.color"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</el-card>
</template>