mirror of
https://gitee.com/yiming_chang/vue-pure-admin.git
synced 2024-12-05 12:47:53 +08:00
feat: add timeline
This commit is contained in:
parent
c749149c2f
commit
7f5aeed4d1
39
src/components/ReFlicker/index.css
Normal file
39
src/components/ReFlicker/index.css
Normal 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;
|
||||
}
|
||||
}
|
44
src/components/ReFlicker/index.ts
Normal file
44
src/components/ReFlicker/index.ts
Normal 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 传0为方形、传50%或者不传为圆形
|
||||
* @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: () => []
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
@ -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) {
|
||||
|
@ -46,5 +46,6 @@ export default {
|
||||
hsResult: "Result Page",
|
||||
hsSuccess: "Success Page",
|
||||
hsFail: "Fail Page",
|
||||
hsIconSelect: "Icon Select"
|
||||
hsIconSelect: "Icon Select",
|
||||
hsTimeline: "Time Line"
|
||||
};
|
||||
|
@ -46,5 +46,6 @@ export default {
|
||||
hsResult: "结果页面",
|
||||
hsSuccess: "成功页面",
|
||||
hsFail: "失败页面",
|
||||
hsIconSelect: "图标选择器"
|
||||
hsIconSelect: "图标选择器",
|
||||
hsTimeline: "时间线"
|
||||
};
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
55
src/views/able/timeline.vue
Normal file
55
src/views/able/timeline.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user