diff --git a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
index 6fd410f8cd1286d1c876fbd52c4cf0a281f76e80..d12597cc15bcea98085e26bc74ccb59581939436 100644
--- a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
+++ b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
@@ -1,8 +1,131 @@
import { mount } from '@vue/test-utils';
-import { TimeAxis } from '../index';
-
+import DTimeAxis from '../src/time-axis';
+import DTimeAxisItem from '../src/components/time-axis-item'
describe('time-axis test', () => {
- it('time-axis init render', async () => {
- // todo
+ const wrapper = mount({
+ components: { DTimeAxis, DTimeAxisItem },
+ template: `
+
+ 测试1
+
+ 测试2
+ 2021-11-10
+
+ 附加元素
+
+ 测试3
+ 测试4
+ 测试5
+
+ `,
+ setup() {
+ return
+ }
+ });
+ const timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+
+ it('should render correctly', async () => {
+ //渲染的dom元素是有这个class
+ expect(wrapper.classes()).toContain('devui-time-axis')
+ //渲染正确子节点数
+ expect(timeAxisItems.length).toBe(5)
+ //看时间是否正确
+ expect(timeAxisItems[0].find('.devui-time-axis-item-time').text()).toBe('2021-11-9')
+ //看内容是否正确
+ expect(timeAxisItems[0].find('.devui-time-axis-item-content').text()).toBe('测试1')
+ })
+
+ it('Custom content should be displayed', async () => {
+ //有自定义的时间节点
+ expect(timeAxisItems[1].find('.devui-time-axis-item-time div').html()).toBe('
2021-11-10
')
+ //有自定义的内容
+ expect(timeAxisItems[1].find('.devui-time-axis-item-content div').html()).toBe('测试2
')
+ //显示自定义时间点
+ expect(timeAxisItems[1].find('.devui-time-axis-item-dot i').exists()).toBe(true)
+ //显示时间点间的附加元素
+ expect(timeAxisItems[1].find('.devui-time-axis-item-line-extra span').html()).toBe('附加元素')
+ })
+
+ it('type should be rendered correctly', async () => {
+ expect(timeAxisItems[0].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-primary')
+ expect(timeAxisItems[2].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-success')
+ expect(timeAxisItems[3].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-warning')
+ expect(timeAxisItems[4].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-error')
+
+ })
+
+ it('position should be rendered correctly', async () => {
+
+ const wrapper = mount({
+ components: { DTimeAxis, DTimeAxisItem },
+ template: `
+
+ 测试1
+ 测试2
+ 测试3
+ 测试3
+
+ `,
+ setup() {
+ return
+ }
+ });
+ let timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+ //内容是否在正确的位置
+ expect(timeAxisItems[0].find('.devui-time-axis-item-data-left .devui-time-axis-item-content').exists()).toBe(true)
+ expect(timeAxisItems[1].find('.devui-time-axis-item-data-right .devui-time-axis-item-content').exists()).toBe(true)
+ expect(timeAxisItems[2].find('.devui-time-axis-item-data-right .devui-time-axis-item-content').exists()).toBe(true)
+ //设置横向时间轴
+ await wrapper.setProps({ direction: 'horizontal' })
+ timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+ expect(timeAxisItems[0].find('.devui-time-axis-item-data-bottom .devui-time-axis-item-content').exists()).toBe(true)
+ expect(timeAxisItems[1].find('.devui-time-axis-item-data-top .devui-time-axis-item-content').exists()).toBe(true)
+ expect(timeAxisItems[3].find('.devui-time-axis-item-data-top .devui-time-axis-item-content').exists()).toBe(true)
+
+ })
+
+ it('time-position should be rendered correctly', async () => {
+ const wrapper = mount({
+ components: { DTimeAxis, DTimeAxisItem },
+ template: `
+
+ 测试1
+ 测试2
+
+ `,
+ setup() {
+ return
+ }
+ });
+ const timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+ //时间是否在正确的位置
+ expect(timeAxisItems[0].find('.devui-time-axis-item-data-left .devui-time-axis-item-time').exists()).toBe(false)
+ expect(timeAxisItems[0].find('.devui-time-axis-item-axis .devui-time-axis-item-time').exists()).toBe(true)
+ expect(timeAxisItems[1].find('.devui-time-axis-item-data-left .devui-time-axis-item-time').exists()).toBe(true)
+ expect(timeAxisItems[1].find('.devui-time-axis-item-axis .devui-time-axis-item-time').exists()).toBe(false)
+ })
+
+ it('line-style should be rendered correctly', async () => {
+ const wrapper = mount({
+ components: { DTimeAxis, DTimeAxisItem },
+ template: `
+
+ 测试1
+ 测试2
+ 测试3
+ 测试4
+ 测试5
+
+ `,
+ setup() {
+ return
+ }
+ });
+ const timeAxisItemAxis = wrapper.findAll('.devui-time-axis-item .devui-time-axis-item-axis')
+ expect(timeAxisItemAxis[0].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-solid')
+ expect(timeAxisItemAxis[1].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-dashed')
+ expect(timeAxisItemAxis[2].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-dotted')
+ expect(timeAxisItemAxis[3].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-none')
+ expect(timeAxisItemAxis[4].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-none')
})
})
diff --git a/packages/devui-vue/devui/time-axis/index.ts b/packages/devui-vue/devui/time-axis/index.ts
index 4edffd52dcf3f043fddd35c818a481b3b56ace4e..e5c509402abb90f2e5ca9a7a9bc086b0b39c32e2 100644
--- a/packages/devui-vue/devui/time-axis/index.ts
+++ b/packages/devui-vue/devui/time-axis/index.ts
@@ -1,17 +1,20 @@
import type { App } from 'vue'
import TimeAxis from './src/time-axis'
+import TimeAxisItem from './src/components/time-axis-item'
TimeAxis.install = function(app: App): void {
app.component(TimeAxis.name, TimeAxis)
+ app.component(TimeAxisItem.name, TimeAxisItem)
}
-export { TimeAxis }
+export { TimeAxis,TimeAxisItem }
export default {
title: 'TimeAxis 时间轴',
category: '数据展示',
- status: '10%', // TODO: 组件若开发完成则填入"已完成",并删除该注释
+ status: '已完成',
install(app: App): void {
app.use(TimeAxis as any)
+ app.use(TimeAxisItem as any)
}
}
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
deleted file mode 100644
index a819cfa1e9d10077233442134348da064ea7eb5f..0000000000000000000000000000000000000000
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-@import '../../../../style/theme/color';
-
-.devui-time-axis-item-type {
- &-primary {
- border: 2px solid $devui-placeholder;
- border-radius: 50%;
- }
-
- &-right {
- i {
- color: $devui-success;
- }
- }
-
- &-danger {
- path {
- fill: $devui-danger;
- }
-
- circle {
- fill: $devui-light-text;
- }
- }
-
- &-warning {
- i {
- color: $devui-warning;
- }
- }
-
- &-running {
- line-height: 16px;
- text-align: center;
- animation: devui-time-axis-running 1.5s linear infinite;
- border: 2px solid $devui-success;
- border-radius: 50%;
- }
-}
-
-.devui-time-axis-item-vertical-time-bottom {
- display: flex;
-
- .devui-time-axis-item-axis {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .devui-time-axis-item-dot {
- &,
- & > svg {
- width: 18px;
- height: 18px;
- }
-
- & > i {
- font-size: 18px;
- }
- }
-
- .devui-time-axis-item-custom-dot {
- width: 18px;
- height: 18px;
- text-align: center;
- }
-
- .devui-time-axis-item-line-time-bottom {
- position: relative;
- height: calc(100% - 36px);
- border-left-width: 2px;
- border-left-color: $devui-dividing-line;
- }
-
- .devui-time-axis-line-style {
- &-dashed {
- border-left-style: dashed;
- }
-
- &-solid {
- border-left-style: solid;
- }
-
- &-none {
- border-left-style: none;
- }
- }
-
- .devui-time-axis-middle-zone {
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
- }
-
- .devui-time-axis-item-data-time-bottom {
- margin-left: 12px;
- margin-bottom: 40px;
- }
-
- .devui-time-axis-item-template {
- margin-left: 12px;
- margin-bottom: 24px;
- }
-}
-
-@keyframes devui-time-axis-running {
- 0% {
- transform: rotate(0deg);
- color: $devui-success;
- border-color: $devui-success;
- }
-
- 50% {
- transform: rotate(180deg);
- color: $devui-success;
- border-color: $devui-success;
- }
-
- 100% {
- transform: rotate(360deg);
- color: $devui-success;
- border-color: $devui-success;
- }
-}
-
-.devui-time-axis-item-data-hidden {
- visibility: hidden;
-}
-
-:host.devui-time-axis-item-horizontal-no-line {
- width: auto !important;
-
- .devui-time-axis-item-data-horizontal-top {
- width: max-content;
- }
-
- .devui-time-axis-item-data-horizontal-bottom {
- width: max-content;
- }
-}
-
-:host.devui-time-axis-item-vertical-no-line {
- .devui-time-axis-item-data-time-bottom {
- margin-bottom: 0;
- }
-
- .devui-time-axis-item-data-vertical-left {
- margin-bottom: 0;
- }
-
- .devui-time-axis-item-data-vertical-right {
- margin-bottom: 0;
- }
-}
-
-.devui-time-axis-item-horizontal-align-center {
- position: relative;
- width: fit-content;
- transform: translateX(-50%);
- left: 8px;
-}
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index 15fae5660100e80a3e8a2117a88a9f22a9fc2952..53ec882a0516ebc7cf4af289034cbb685e725f50 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -1,32 +1,89 @@
-import {defineComponent} from 'vue'
-
-import {timeAxisItemProps, TimeAxisItemProps} from './types'
-import './index.scss'
+import {defineComponent, inject} from 'vue'
+import type {TimeAxisRootType} from '../../time-axis-types'
+import DIcon from '../../../../icon/src/icon'
+import {timeAxisItemProps, TimeAxisItemProps, Type} from './types'
export default defineComponent({
- name: 'DTimeAxisItem',
- props: timeAxisItemProps,
- emits: [],
- setup(props: TimeAxisItemProps, ctx) {
- const itemClass = 'devui-time-axis-item'
- return () => {
- return (
-
-
-
- {props.time}
-
-
-
-
- {props.text}
-
-
- )
+ name: 'DTimeAxisItem',
+ components: {DIcon},
+ props: timeAxisItemProps,
+ emits: [],
+ setup(props: TimeAxisItemProps, ctx) {
+ const timeAxis: TimeAxisRootType = inject('timeAxis')
+ const itemClass = 'devui-time-axis-item'
+ const renderTime = () => {
+ return (
+
+ {
+ ctx.slots.time
+ ? ctx.slots.time?.()
+ : props.time
+ }
+
+ )
+ }
+ const renderContent = () => {
+ return (
+
+ {ctx.slots.default?.(props)}
+
+ )
+ }
+ const renderPosition = (types: string[]) => {
+ //如果有设置position的话,就直接用position的内容
+ if (types.includes(props.position)) {
+ return renderContent()
+ } else {
+ //如果是horizontal直接返回时间
+ if (timeAxis.props.direction === 'horizontal') {
+ return renderTime()
+ } else {
+ //如果有设定time-position,则left显示在这
+ return props.timePosition === 'left' ? renderTime() : ''
}
+ }
+ }
+ const setTypeIcon = (type: Type) => {
+ if (type === 'primary') {
+ return ''
+ }
+ return
+ }
+ const renderDot = () => {
+ if (ctx.slots.dot) {
+ return {ctx.slots.dot?.()}
+ } else {
+ return (
+ {setTypeIcon(props.type)}
+
)
+ }
+ }
+
+ return () => {
+ return (
+
+
+ {renderPosition(['top', 'left'])}
+
+
+ {
+ renderDot()
+ }
+ {(timeAxis.props.direction === 'vertical' && props.timePosition === 'bottom') ? renderTime() : ''}
+
+ {ctx.slots.extra ? : ''}
+
+
+
+ {renderPosition(['right', 'bottom'])}
+
+
+
+ )
}
+ }
})
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
index fba08a5ed5f787293acb330924a5927f1712b356..d41725925b708907870261c56c894a1abea0a067 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
@@ -1,18 +1,37 @@
import type { PropType, ExtractPropTypes } from 'vue'
-
-
-
+import type { LineStyle,TimePosition } from '../../time-axis-types'
+export type Position = 'top' | 'bottom' | 'left' | 'right'
+export type Type = 'primary' | 'success' | 'warning' | 'error'
export const timeAxisItemProps = {
time: {
type: String,
},
- text: {
- type: String,
- },
-
//可选,自定义时间圈颜色
dotColor: {
type: String
+ },
+ //分界线的样式
+ lineStyle: {
+ type: String as PropType,
+ default: 'solid'
+ },
+ //分界线的样式
+ lineColor: {
+ type: String
+ },
+ //分界线的样式
+ position: {
+ type: String as PropType
+ },
+ //设置时间位置
+ timePosition: {
+ type: String as PropType,
+ default: 'left'
+ },
+ //时间点类型
+ type: {
+ type: String as PropType,
+ default: 'primary'
}
} as const
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
index eb00d1b4fc1609451bc39c21cdd7eb491e12eca1..4ca37a4745674c005ffb588638444e7b588a85d6 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
+++ b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
@@ -1,27 +1,8 @@
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes,SetupContext } from 'vue'
export type DataDirection = 'vertical' | 'horizontal'
-
-
-
-export interface DataItem {
- //时间
- time: string
- //文本内容
- text: string
- // lineStyle?: Object<{}>
- //可选,自定义时间圈颜色
- dotColor?: string
- customDot?: string | HTMLElement
- //时间点类型
- type?: 'primary' | 'success' | 'danger' | 'warning'
- status?: 'runned' | 'running' | ''
- position?: 'top' | 'bottom' | 'left' | 'right'
- extraElement?: string | HTMLElement
- iconClass?: string
- data?: any
-}
-
-
+export type Mode = 'normal' | 'alternative'
+export type TimePosition = 'left' | 'bottom'
+export type LineStyle = 'solid' | 'dashed' | 'dotted' | 'none'
export const timeAxisProps = {
//设置时间轴方向
@@ -29,11 +10,26 @@ export const timeAxisProps = {
type: String as PropType,
default: 'vertical'
},
- //列表数据
- data: {
- type: Array as PropType,
- default:()=>[]
+ //设置居中
+ center: {
+ type: Boolean,
+ default: false
+ },
+ //设置排序方向
+ mode: {
+ type: String as PropType,
+ default: 'normal'
+ },
+ //设置时间位置
+ timePosition: {
+ type: String as PropType,
+ default: 'left'
}
} as const
export type TimeAxisProps = ExtractPropTypes
+
+export interface TimeAxisRootType {
+ ctx: SetupContext
+ props: TimeAxisProps
+}
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.scss b/packages/devui-vue/devui/time-axis/src/time-axis.scss
index 0a78557fdc4e81df1ad735d0eb20550c27233585..24b1ec55a134bc627c0b279aea1e5a94f5024ccb 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.scss
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.scss
@@ -24,9 +24,16 @@ $devui-time-axis-item-dot-size: 18px;
&-line {
position: relative;
height: calc(100% - #{$devui-time-axis-item-dot-size});
+ min-height: 20px;
border-left-width: 2px;
border-left-color: $devui-dividing-line;
+ &-extra {
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+
&:first-child {
display: none;
}
@@ -34,16 +41,12 @@ $devui-time-axis-item-dot-size: 18px;
&-data-left {
text-align: end;
- margin-bottom: 24px;
- height: $devui-time-axis-item-dot-size;
- line-height: $devui-time-axis-item-dot-size;
- flex: 1;
}
+ &-data-left,
&-data-right {
margin-bottom: 24px;
- height: $devui-time-axis-item-dot-size;
- line-height: $devui-time-axis-item-dot-size;
+ margin-top: -2px;
flex: 1;
}
@@ -79,6 +82,20 @@ $devui-time-axis-item-dot-size: 18px;
align-items: center;
position: relative;
+ &-center {
+ .devui-time-axis-item {
+ &-data-top,
+ &-data-bottom {
+ text-align: center;
+ padding: 0 6px;
+
+ > div {
+ transform: translateX(-50%);
+ }
+ }
+ }
+ }
+
.devui-time-axis-item {
display: flex;
flex-direction: column;
@@ -93,10 +110,16 @@ $devui-time-axis-item-dot-size: 18px;
&-line {
position: relative;
- min-width: 20px;
- width: calc(50% - calc(#{$devui-time-axis-item-dot-size} / 2));
+ min-width: 60px;
+ width: calc(100% - #{$devui-time-axis-item-dot-size});
border-bottom-width: 2px;
border-bottom-color: $devui-dividing-line;
+
+ &-extra {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
&:first-child {
@@ -107,17 +130,9 @@ $devui-time-axis-item-dot-size: 18px;
}
}
- &-data-top {
- text-align: center;
- display: flex;
- align-items: flex-end;
- padding: 0 12px;
- flex: 1;
- }
-
+ &-data-top,
&-data-bottom {
- text-align: center;
- padding: 0 12px;
+ padding-right: 12px;
flex: 1;
}
@@ -154,18 +169,73 @@ $devui-time-axis-item-dot-size: 18px;
& > svg {
width: $devui-time-axis-item-dot-size;
height: $devui-time-axis-item-dot-size;
+ flex-shrink: 0;
}
& > i {
font-size: $devui-time-axis-item-dot-size;
+ vertical-align: 0;
}
}
- &:last-child {
- .devui-time-axis-item-line {
- &:last-child {
- display: none;
+ //&:last-child {
+ // .devui-time-axis-item-line {
+ // &:last-child {
+ // display: none;
+ // }
+ // }
+ //}
+
+ &-type {
+ &-primary {
+ border: 2px solid $devui-placeholder;
+ border-radius: 50%;
+ }
+
+ &-success {
+ i {
+ color: $devui-success;
+ }
+ }
+
+ &-error {
+ i {
+ color: $devui-danger;
}
}
+
+ &-warning {
+ i {
+ color: $devui-warning;
+ }
+ }
+
+ &-running {
+ line-height: 16px;
+ text-align: center;
+ animation: devui-time-axis-running 1.5s linear infinite;
+ border: 2px solid $devui-success;
+ border-radius: 50%;
+ }
+ }
+}
+
+@keyframes devui-time-axis-running {
+ 0% {
+ transform: rotate(0deg);
+ color: $devui-success;
+ border-color: $devui-success;
+ }
+
+ 50% {
+ transform: rotate(180deg);
+ color: $devui-success;
+ border-color: $devui-success;
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ color: $devui-success;
+ border-color: $devui-success;
}
}
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 03ae7416ef30f94c8fa9914c8c817d7ced486d19..6d8e6e5baee04864f54e72b466c01430bee08c4d 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -1,20 +1,106 @@
-import { defineComponent } from 'vue'
-import { timeAxisProps, TimeAxisProps } from './time-axis-types'
+import {defineComponent, Fragment, nextTick, onMounted, provide, reactive, ref, toRef, watch} from 'vue'
+import {timeAxisProps, TimeAxisProps, TimeAxisRootType} from './time-axis-types'
import TimeAxisItem from './components/time-axis-item'
import './time-axis.scss'
export default defineComponent({
name: 'DTimeAxis',
- components: { TimeAxisItem },
+ components: {TimeAxisItem},
props: timeAxisProps,
emits: [],
setup(props: TimeAxisProps, ctx) {
+ provide('timeAxis', {ctx, props})
+ const timeAxis = ref();
+ const style = reactive({
+ marginLeft: '0px',
+ height: 'auto'
+ })
+ const setStyle = () => {
+ style.height = 'auto'
+ style.marginLeft = '0px'
+ if (props.direction === 'horizontal') {
+ nextTick(() => {
+ const el = timeAxis.value;
+ if (props.center) {
+ //计算偏移量
+ style.marginLeft = (el?.firstElementChild?.clientWidth || 0) / 2 + 'px'
+ }
+ //算出最大高度
+ style.height = Math.max(
+ ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-top')).map(el => el.clientHeight),
+ ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-bottom')).map(el => el.clientHeight)
+ ) * 2
+ + Math.max(...Array.from(el?.querySelectorAll('.devui-time-axis-item-axis')).map(el => el.clientHeight))
+ + 'px'
+ });
+ }
+ }
+ onMounted(() => {
+ setStyle()
+ });
+ watch(toRef(props, 'direction'), () => {
+ setStyle()
+ })
return () => {
- return (
-
- {
- props.data.map(item=>
)
+ const renderItemPosition = (item, position?) => {
+ return position
+ ?
-
+ :
+ }
+
+
+ const renderItem = () => {
+ const slots: any[] = ctx.slots.default?.() ?? [];
+ let children;
+ if (slots.length === 1 && slots[0].type === Fragment) {
+ children = slots[0].children || []
+ } else {
+ children = slots
+ }
+ return children.map((item, index) => {
+ //默认隐藏最后一条线
+ if ((index + 1) === children.length) {
+ if (!item.props?.lineStyle && !item.props?.['line-style']) {
+ item =
+ }
}
+ //如果没有单独设置time-position属性,则以全局为准
+ if (!item.props?.timePosition && !item.props?.['time-position']) {
+ item =
+ }
+
+ if (props.direction === 'horizontal') {
+ //判断是否有自定义的位置信息,且是否正确 有,且正确直接用
+ if (item.props?.position === 'top' || item.props?.position === 'bottom') return item
+ //判断是否需要交替
+ if (props.mode === 'alternative') {
+ return renderItemPosition(item, index % 2 == 0 ? 'bottom' : 'top')
+ } else {
+ //不需要交替的直接给默认值
+ return renderItemPosition(item, 'bottom')
+ }
+ } else {
+ if (item.props?.position === 'left' || item.props?.position === 'right') return item
+ if (props.mode === 'alternative') {
+ return renderItemPosition(item, index % 2 == 0 ? 'left' : 'right')
+ } else {
+ return renderItemPosition(item, 'right')
+ }
+ }
+ })
+ }
+ //防止字段传入错误,导致显示错误
+ const getDirection = () => {
+ return props.direction === 'horizontal' ? 'horizontal' : 'vertical'
+ }
+
+ return (
+
+ {renderItem()}
)
}
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 4740b68c2faca51c70c350ac347549b071285473..01ae74f482dfe6bdc1952a08eefef4a6b7f08c89 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -8,11 +8,10 @@
### 基本用法
-通过 direction 配置时间线排列方向,默认值为`vertical`。
+通过 `direction` 属性配置时间线排列方向,默认值为`vertical`。
:::demo
```vue
-
@@ -20,7 +19,17 @@
{{ item }}
-
+
+
+ {{item.text}}
+
+
@@ -29,59 +38,283 @@ import {defineComponent, ref} from 'vue'
export default defineComponent({
setup() {
- const list = ref(['horizontal', 'vertical'])
- const choose = ref('horizontal')
- const data = ref([
+ const list = ref(['vertical', 'horizontal'])
+ const choose = ref('vertical')
+ const timeAxisList = ref([
{
text: 'Download',
- time: '2021-07-28'
+ time: '2021-10-1'
},
{
text: 'Check',
- time: '2021-07-29',
+ time: '2021-10-2',
dotColor: 'var(--devui-success)'
},
{
text: 'Build',
- time: '2021-07-30',
+ time: '2021-10-3',
dotColor: 'var(--devui-danger)'
},
{
text: 'Depoy',
- time: '2021-07-31',
+ time: '2021-10-4',
dotColor: 'var(--devui-warning)'
},
{
text: 'End',
- time: '2021-08-01',
+ time: '2021-10-5',
dotColor: 'var(--devui-waiting)'
}
])
- return {data, list, choose}
+ return {timeAxisList, list, choose}
}
})
+```
+
+:::
+
+### 自定义样式
+
+:::demo
+
+```vue
+
+
+
+
+ {{item.time}}
+
+
+
+
+ {{item.text}}
+
+
+
-
+
```
:::
-### d-time-axis
+### 自定义内容
+
+可以使用 mode 为 `alternative` 设置内容交替展示
+:::demo
+```vue
+
+
+
+
+
+
+
+
+
{{ item.title }}
+
发布日期:{{ item.date }}
+
版本状态:
+ {{item.status}}
+
+
+
+
+
+
+
+ 2020
+
+
+
+
+
+
+
+```
-d-time-axis 参数
+:::
+
+### 自定义内容位置
+
+:::demo
+
+```vue
+
+ 当 direction 为 horizontal 时 position 默认 bottom
+
+ Download
+ Check
+ Build
+ Depoy
+ End
+
+ 当 direction 为 vertical 时 position 默认 right
+
+ Download
+ Check
+ Build
+ Depoy
+ End
+
+
+```
+
+:::
+
+### 设置时间位置
+
+:::demo
+
+```vue
+
+
+ Download
+ Check
+ Build
+ Depoy
+ End
+
+
+```
+
+:::
+
+### d-time-axis
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
| ------------ | ---- | ---- | ---- | --------- |
-| direction | `'vertical'\|'horizontal'` | `vertical` | 设置时间轴方向 | [基本用法](#基本用法) |
-| data | `array` | `[]` | 列表数据(具体参数如下) | [基本用法](#基本用法) |
-
+| direction | `'vertical'\|'horizontal'` | `vertical` | 设置时间轴方向 | [基本用法](#基本用法) |
+| center | `boolean`| `false` | 当方向为`horizontal`时,是否将内容设置居中 | [基本用法](#基本用法) |
+| mode | `'normal'\|'alternative'` | `normal` | 可选,`normal`模式下内容按默认方向排布, `alternative`模式下内容交替排布 | [自定义内容](#自定义内容) |
+| time-position | `'left'\|'bottom'` | `left` | 可选,仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置,当与`mode`属性冲突时以`mode`为准) | [自定义内容](#自定义内容) |
-data 参数
+### d-time-axis-item
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
| ---- | ---- | ---- | ---- | ---- |
-| time|`string`| -- | 可选,时间 | |
-| text |`string` | -- | 可选,文本内容 | |
-| dotColor | `string` | -- | 可选,自定义时间圈颜色 | |
+| time|`string`| -- | 可选,时间 | [基本用法](#基本用法) |
+| text |`string` | -- | 可选,文本内容 | [基本用法](#基本用法) |
+| dot-color | `string` | -- | 可选,自定义时间圈颜色 | [基本用法](#基本用法) |
+| line-style| `'solid'\|'dashed'\|'dotted'\|'none'` | `solid` | 可选,设置线条样式(若没有设置,则默认时间轴最后一个元素为`none`) | [自定义样式](#自定义样式) |
+| line-color |`string` | -- | 可选,设置线条颜色 | [自定义样式](#自定义样式) |
+| position |`'top'\|'bottom'\|'left'\|'right'` | 当`direction`为`vertical`时默认:`right`,当`direction`为`horizontal`时,默认:`bottom` | 可选,设置内容存在的位置,若有time则time处在相反的位置 | [自定义内容位置](#自定义内容位置) |
+| time-position | `'left'\|'bottom'` | `left` | 可选,仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置,当与`position`属性冲突时以`position`为准) | [设置时间位置](#设置时间位置) |
+| type | `'primary' \| 'success' \| 'warning' \| 'error'` | `primary` | 可选,时间点类型 | [自定义内容](#自定义内容) |
+
+### d-time-axis-item插槽
+
+| 参数 | 描述 | 跳转 Demo |
+| ------------ | ---- | --------- |
+| default | 自定义内容 | [自定义内容](#自定义内容) |
+| dot | 自定义时间轴点 | [自定义样式](#自定义样式) |
+| time | 自定义时间 | [自定义样式](#自定义样式) |
+| extra | 自定义两个时间点间附加元素 | [自定义内容](#自定义内容) |