forked from opentiny/tiny-vue
feat(timeline): timeline样式修改 (#38)
Signed-off-by: MNZhu <zhumaonan@aliyun.com>
This commit is contained in:
jacknan
GitHub
parent
381325d19b
commit
a7effca5c6
|
|
@ -1,82 +0,0 @@
|
||||||
<template>
|
|
||||||
<tiny-time-line :data="data" name-field="statusText" time-field="date"></tiny-time-line>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { TimeLine } from '@opentiny/vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
TinyTimeLine: TimeLine
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 1,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
status: 'current',
|
|
||||||
date: '2019-11-12 14:20:15',
|
|
||||||
statusText: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'success',
|
|
||||||
date: '2019-11-12 14:20:15',
|
|
||||||
statusText: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'fail',
|
|
||||||
date: '2019-11-12 14:20:15',
|
|
||||||
statusText: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'complete',
|
|
||||||
date: '2019-11-12 14:20:15',
|
|
||||||
statusText: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'complete',
|
|
||||||
date: '2019-11-12 14:20:15',
|
|
||||||
statusText: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'complete',
|
|
||||||
date: '2019-11-11 00:01:30',
|
|
||||||
statusText: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
click(index, node) {
|
|
||||||
this.active = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.tiny-mobile-timeline__date-time {
|
|
||||||
padding: 15px 22px 15px 4px !important;
|
|
||||||
}
|
|
||||||
.tiny-mobile-timeline__content {
|
|
||||||
padding: 15px 16px 14px 22px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,15 +1,43 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline">
|
<div>
|
||||||
<div class="page__hd">
|
<div class="title">横向步骤条 正向</div>
|
||||||
<h1 class="page__title">Timeline</h1>
|
<tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
|
||||||
<p class="page__desc">时间轴</p>
|
<tiny-time-line :data="data4" type="timeline" :active="timeActive1" @click="timeClick1">
|
||||||
|
<template v-slot:bottom>
|
||||||
|
<div class="text-content">
|
||||||
|
<div class="main-text">标题文字</div>
|
||||||
|
<div class="sub-text">辅助信息文字辅助信息文字辅助信息文字辅助信息文字</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</tiny-time-line>
|
||||||
|
<div class="half-div">
|
||||||
|
<div class="title">竖式步骤条 正向</div>
|
||||||
|
<tiny-time-line :data="data4" type="timeline" vertical :active="timeActive2" @click="timeClick2">
|
||||||
|
<template v-slot:content>
|
||||||
|
<div class="content-view">
|
||||||
|
<div>内容区</div>
|
||||||
|
<div>内容区</div>
|
||||||
|
<div>内容区</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</tiny-time-line>
|
||||||
|
</div>
|
||||||
|
<div class="half-div">
|
||||||
|
<div class="title">竖式步骤条 反向</div>
|
||||||
|
<tiny-time-line :data="data3" reverse type="timeline" vertical :active="timeActive3" @click="timeClick3">
|
||||||
|
<template v-slot:header="{ item }">
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="label">标签</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</tiny-time-line>
|
||||||
</div>
|
</div>
|
||||||
<tiny-time-line :data="data"></tiny-time-line>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { TimeLine } from '@opentiny/vue'
|
import { TimeLine, Modal } from '@opentiny/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -17,86 +45,91 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
data: [
|
timeActive1: 1,
|
||||||
{
|
timeActive2: 0,
|
||||||
status: 'current',
|
timeActive3: 0,
|
||||||
time: '2019-11-12 14:20:15',
|
data3: [
|
||||||
name: '筛选中',
|
{ name: '已下单', state: 'normal', fold: true },
|
||||||
personInfo: '张三',
|
{ name: '运输中', state: 'success', fold: false, showFoldBtn: true },
|
||||||
cycle: '周期：2天',
|
{ name: '已签收', state: 'error' },
|
||||||
overdue: '已超期 1 天'
|
{ name: '已确认收货', state: 'handing' }
|
||||||
},
|
],
|
||||||
{
|
data4: [
|
||||||
status: 'success',
|
{ name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
|
||||||
time: '2019-11-12 14:20:15',
|
{ name: '运输中', state: 'success', showFoldBtn: true, fold: true },
|
||||||
name: '筛选中',
|
{ name: '已签收', state: 'error', showFoldBtn: true, fold: true },
|
||||||
personInfo: '张三',
|
{ name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'fail',
|
|
||||||
time: '2019-11-12 14:20:15',
|
|
||||||
name: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'complete',
|
|
||||||
time: '2019-11-12 14:20:15',
|
|
||||||
name: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'complete',
|
|
||||||
time: '2019-11-12 14:20:15',
|
|
||||||
name: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'complete',
|
|
||||||
time: '2019-11-11 00:01:30',
|
|
||||||
name: '筛选中',
|
|
||||||
personInfo: '张三',
|
|
||||||
cycle: '周期：2天',
|
|
||||||
overdue: '已超期 1 天'
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
timeClick1(index, node) {
|
||||||
|
this.timeActive1 = index
|
||||||
|
|
||||||
|
Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
|
||||||
|
},
|
||||||
|
timeClick2(index) {
|
||||||
|
this.timeActive2 = index
|
||||||
|
},
|
||||||
|
timeClick3(index) {
|
||||||
|
this.timeActive3 = index
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="less" scoped>
|
||||||
.timeline {
|
.half-div {
|
||||||
height: calc(100% - 118px);
|
display: inline-block;
|
||||||
width: 100%;
|
width: 49%;
|
||||||
overflow: hidden;
|
margin-top: 60px;
|
||||||
overflow-y: auto;
|
margin-bottom: 50px;
|
||||||
|
padding-left: 50px;
|
||||||
}
|
}
|
||||||
.page__hd {
|
|
||||||
padding: 40px;
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
.page__title {
|
|
||||||
font-weight: 400;
|
.text-content {
|
||||||
font-size: 21px;
|
display: flex;
|
||||||
text-align: left;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.page__desc {
|
|
||||||
margin-top: 5px;
|
.main-text {
|
||||||
color: #888;
|
font-size: 12px;
|
||||||
font-size: 14px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
.tiny-mobile-timeline__date-time {
|
|
||||||
padding: 15px 22px 15px 4px !important;
|
.sub-text {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999;
|
||||||
|
width: 80%;
|
||||||
|
line-height: 16px;
|
||||||
}
|
}
|
||||||
.tiny-mobile-timeline__content {
|
|
||||||
padding: 15px 16px 14px 22px !important;
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
font-size: 12px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
background: rgba(102, 135, 255, 0.1);
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
width: 28px;
|
||||||
|
margin-left: 8px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-view {
|
||||||
|
background: #f6f6f6;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title">横向步骤条 正向</div>
|
||||||
|
<tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
|
||||||
|
<tiny-time-line :data="data4" type="timeline" :active="timeActive1" @click="timeClick1">
|
||||||
|
<template v-slot:bottom>
|
||||||
|
<div class="text-content">
|
||||||
|
<div class="main-text">标题文字</div>
|
||||||
|
<div class="sub-text">辅助信息文字辅助信息文字辅助信息文字辅助信息文字</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</tiny-time-line>
|
||||||
|
<div class="half-div">
|
||||||
|
<div class="title">竖式步骤条 正向</div>
|
||||||
|
<tiny-time-line :data="data4" type="timeline" vertical :active="timeActive2" @click="timeClick2">
|
||||||
|
<template v-slot:content>
|
||||||
|
<div class="content-view">
|
||||||
|
<div>内容区</div>
|
||||||
|
<div>内容区</div>
|
||||||
|
<div>内容区</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</tiny-time-line>
|
||||||
|
</div>
|
||||||
|
<div class="half-div">
|
||||||
|
<div class="title">竖式步骤条 反向</div>
|
||||||
|
<tiny-time-line :data="data3" reverse type="timeline" vertical :active="timeActive3" @click="timeClick3">
|
||||||
|
<template v-slot:header="{ item }">
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="label">标签</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</tiny-time-line>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { TimeLine, Modal } from '@opentiny/vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
TinyTimeLine: TimeLine
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timeActive1: 1,
|
||||||
|
timeActive2: 0,
|
||||||
|
timeActive3: 0,
|
||||||
|
data3: [
|
||||||
|
{ name: '已下单', state: 'normal', fold: true, time: '2019-11-12 14:20:15' },
|
||||||
|
{ name: '运输中', state: 'success', fold: false, showFoldBtn: true, time: '2019-11-12 14:20:15' },
|
||||||
|
{ name: '已签收', state: 'error', time: '2019-11-12 14:20:15' },
|
||||||
|
{ name: '已确认收货', state: 'handing', time: '2019-11-12 14:20:15' }
|
||||||
|
],
|
||||||
|
data4: [
|
||||||
|
{ name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
|
||||||
|
{ name: '运输中', state: 'success', showFoldBtn: true, fold: true },
|
||||||
|
{ name: '已签收', state: 'error', showFoldBtn: true, fold: true },
|
||||||
|
{ name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
timeClick1(index, node) {
|
||||||
|
this.timeActive1 = index
|
||||||
|
|
||||||
|
Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
|
||||||
|
},
|
||||||
|
timeClick2(index) {
|
||||||
|
this.timeActive2 = index
|
||||||
|
},
|
||||||
|
timeClick3(index) {
|
||||||
|
this.timeActive3 = index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.half-div {
|
||||||
|
display: inline-block;
|
||||||
|
width: 49%;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-text {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-text {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999;
|
||||||
|
width: 80%;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
font-size: 12px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
background: rgba(102, 135, 255, 0.1);
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
width: 28px;
|
||||||
|
margin-left: 8px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-view {
|
||||||
|
background: #f6f6f6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div class="demo-header">
|
||||||
|
<p class="overviewicon">
|
||||||
|
<span class="wapi-ui-time-line wapi-navigation-steps"/>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
## TimeLine 时间轴
|
||||||
|
|
||||||
|
<mobile-uxlink widget-name="TimeLine"></mobile-uxlink>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### 步骤条样式
|
||||||
|
|
||||||
|
<mobile-view link="time-line/steps"></mobile-view>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- <mobile-attributes link="time-line"></mobile-attributes> -->
|
||||||
|
|
@ -93,10 +93,6 @@
|
||||||
"path": "/time-line",
|
"path": "/time-line",
|
||||||
"name": "TimeLine 时间轴",
|
"name": "TimeLine 时间轴",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
|
||||||
"path": "/time-line/different-data",
|
|
||||||
"name": "数据映射"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "/time-line/slot",
|
"path": "/time-line/slot",
|
||||||
"name": "插槽"
|
"name": "插槽"
|
||||||
|
|
@ -104,6 +100,10 @@
|
||||||
{
|
{
|
||||||
"path": "/time-line/space",
|
"path": "/time-line/space",
|
||||||
"name": "设置高度"
|
"name": "设置高度"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/time-line/steps",
|
||||||
|
"name": "步骤条"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -765,16 +765,16 @@ const router = [
|
||||||
meta: { title: 'mobileTimeLine 时间轴组件 - 插槽', lang: 'zh-CN' },
|
meta: { title: 'mobileTimeLine 时间轴组件 - 插槽', lang: 'zh-CN' },
|
||||||
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/slot.md')
|
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/slot.md')
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'time-line/different-data',
|
|
||||||
meta: { title: 'mobileTimeLine 时间轴组件 - 数据映射', lang: 'zh-CN' },
|
|
||||||
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/different-data.md')
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'time-line/space',
|
path: 'time-line/space',
|
||||||
meta: { title: 'mobileTimeLine 时间轴组件 - 高度', lang: 'zh-CN' },
|
meta: { title: 'mobileTimeLine 时间轴组件 - 高度', lang: 'zh-CN' },
|
||||||
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/space.md')
|
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/space.md')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'time-line/steps',
|
||||||
|
meta: { title: 'mobileTimeLine 时间轴组件 - 步骤条', lang: 'zh-CN' },
|
||||||
|
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/time-line/steps.md')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'dropdown-menu',
|
path: 'dropdown-menu',
|
||||||
meta: { title: 'mobileDropdownMenu 筛选排序组件', lang: 'zh-CN' },
|
meta: { title: 'mobileDropdownMenu 筛选排序组件', lang: 'zh-CN' },
|
||||||
|
|
|
||||||
|
|
@ -10,54 +10,97 @@
|
||||||
*
|
*
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div :class="['tiny-mobile-timeline']">
|
<div :class="['tiny-mobile-steps', { 'is-horizontal': horizontal && !vertical }]">
|
||||||
|
<div v-if="!vertical" class="tiny-mobile-steps-normal">
|
||||||
<div
|
<div
|
||||||
v-for="(node, index) in state.nodes"
|
v-for="(node, index) in state.nodes"
|
||||||
:key="index"
|
:key="index"
|
||||||
:style="{
|
:style="{
|
||||||
height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
|
width: horizontal ? 'auto' : space ? space + 'px' : 100 / state.nodes.length + '%'
|
||||||
}"
|
}"
|
||||||
:class="['tiny-mobile-timeline__item', node.status]"
|
:class="['normal', getStatusCls(index)]"
|
||||||
>
|
>
|
||||||
<ul class="tiny-mobile-timeline__list">
|
<slot name="top" :slot-scope="node">
|
||||||
<slot name="left" :slot-scope="node">
|
<div class="date-time">
|
||||||
<li class="tiny-mobile-timeline__date-time">
|
<span class="time">{{ getDate(node[timeField]).date }} {{ getDate(node[timeField]).time }}</span>
|
||||||
<span class="tiny-mobile-timeline__date">{{ getDate(node[timeField]).date }}</span>
|
|
||||||
<span class="tiny-mobile-timeline__time">{{ getDate(node[timeField]).time }}</span>
|
|
||||||
</li>
|
|
||||||
</slot>
|
|
||||||
<li
|
|
||||||
:style="{
|
|
||||||
height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
|
|
||||||
}"
|
|
||||||
class="tiny-mobile-timeline__line"
|
|
||||||
>
|
|
||||||
<div class="tiny-mobile-timeline__icon"></div>
|
|
||||||
</li>
|
|
||||||
<slot name="right" :slot-scope="node">
|
|
||||||
<li class="tiny-mobile-timeline__content">
|
|
||||||
<div>
|
|
||||||
<span class="tiny-mobile-timeline__title">{{ node[nameField] }}</span>
|
|
||||||
<span class="tiny-mobile-timeline__cycle">{{ node.cycle }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<span class="tiny-mobile-timeline__user">{{ node.personInfo }}</span>
|
|
||||||
<span class="tiny-mobile-timeline__tip">{{ node.overdue }}</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</slot>
|
</slot>
|
||||||
|
<div class="icon" @click="handleClick({ index, node })">
|
||||||
|
<span v-if="index >= state.current">{{ showNumber ? index + start : '' }}</span>
|
||||||
|
<span v-else :custom-title="index + start" class="icon-wrap">
|
||||||
|
<icon-yes class="tiny-svg-size fixicon" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'line',
|
||||||
|
{
|
||||||
|
'line-done': index < state.current,
|
||||||
|
'line-end': index === state.nodes.length - 1
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
></div>
|
||||||
|
<div class="node-description">
|
||||||
|
<slot name="bottom" v-bind:item="node">
|
||||||
|
<div class="name" v-text="node[nameField]"></div>
|
||||||
|
<div class="status">
|
||||||
|
{{ showStatus ? getStatus(index) : '' }}
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else :class="['tiny-mobile-steps-timeline', { reverse }]">
|
||||||
|
<div v-for="(node, index) in state.nodes" :key="index" class="timeline">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="header">
|
||||||
|
<div v-if="node.time" class="date-time-vertical">
|
||||||
|
<span class="time">{{ getDate(node[timeField]).date }} {{ getDate(node[timeField]).time }}</span>
|
||||||
|
</div>
|
||||||
|
<span :class="['round', `round-${node.state}`]"></span>
|
||||||
|
<slot name="header" v-bind:item="node">
|
||||||
|
<div class="name">{{ node.name }}</div>
|
||||||
|
</slot>
|
||||||
|
<div v-if="node.showFoldBtn" :class="['arrow-btn', node.fold ? 'arrow-btn-fold' : '']" @click="node.fold = !node.fold"></div>
|
||||||
|
</div>
|
||||||
|
<div v-if="!node.fold" :class="['content', node.time ? 'content-left-margin' : null]">
|
||||||
|
<slot name="content"> </slot>
|
||||||
|
</div>
|
||||||
|
<div :class="['line', node.time ? 'line-left-margin' : null]"></div>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { renderless, api } from '@opentiny/vue-renderless/time-line/vue'
|
import { renderless, api } from '@opentiny/vue-renderless/time-line/vue'
|
||||||
import { props, setup } from '@opentiny/vue-common'
|
import { props, setup } from '@opentiny/vue-common'
|
||||||
import '@opentiny/vue-theme-mobile/time-line/index.css'
|
import { iconYes } from '@opentiny/vue-icon'
|
||||||
|
import '@opentiny/vue-theme-mobile/steps/index.css'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: [...props, 'nameField', 'timeField', 'data', 'space'],
|
emits: ['click'],
|
||||||
|
props: [
|
||||||
|
...props,
|
||||||
|
'vertical',
|
||||||
|
'horizontal',
|
||||||
|
'showNumber',
|
||||||
|
'nameField',
|
||||||
|
'timeField',
|
||||||
|
'start',
|
||||||
|
'data',
|
||||||
|
'space',
|
||||||
|
'active',
|
||||||
|
'reverse',
|
||||||
|
'showStatus',
|
||||||
|
'showFoldBtn'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
IconYes: iconYes()
|
||||||
|
},
|
||||||
setup(props, context) {
|
setup(props, context) {
|
||||||
return setup({ props, context, renderless, api })
|
return setup({ props, context, renderless, api })
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue