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>
|
||||
<div class="timeline">
|
||||
<div class="page__hd">
|
||||
<h1 class="page__title">Timeline</h1>
|
||||
<p class="page__desc">时间轴</p>
|
||||
<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>
|
||||
<tiny-time-line :data="data"></tiny-time-line>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLine } from '@opentiny/vue'
|
||||
import { TimeLine, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -17,86 +45,91 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
status: 'current',
|
||||
time: '2019-11-12 14:20:15',
|
||||
name: '筛选中',
|
||||
personInfo: '张三',
|
||||
cycle: '周期：2天',
|
||||
overdue: '已超期 1 天'
|
||||
},
|
||||
{
|
||||
status: 'success',
|
||||
time: '2019-11-12 14:20:15',
|
||||
name: '筛选中',
|
||||
personInfo: '张三',
|
||||
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 天'
|
||||
}
|
||||
timeActive1: 1,
|
||||
timeActive2: 0,
|
||||
timeActive3: 0,
|
||||
data3: [
|
||||
{ name: '已下单', state: 'normal', fold: true },
|
||||
{ name: '运输中', state: 'success', fold: false, showFoldBtn: true },
|
||||
{ name: '已签收', state: 'error' },
|
||||
{ name: '已确认收货', state: 'handing' }
|
||||
],
|
||||
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 scoped>
|
||||
.timeline {
|
||||
height: calc(100% - 118px);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
<style lang="less" scoped>
|
||||
.half-div {
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 50px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
.page__hd {
|
||||
padding: 40px;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.page__title {
|
||||
font-weight: 400;
|
||||
font-size: 21px;
|
||||
text-align: left;
|
||||
|
||||
.text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.page__desc {
|
||||
margin-top: 5px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
|
||||
.main-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
"name": "TimeLine 时间轴",
|
||||
"children": [
|
||||
{
|
||||
"path": "/time-line/different-data",
|
||||
"name": "数据映射"
|
||||
},
|
||||
{
|
||||
"path": "/time-line/slot",
|
||||
"name": "插槽"
|
||||
|
|
@ -104,6 +100,10 @@
|
|||
{
|
||||
"path": "/time-line/space",
|
||||
"name": "设置高度"
|
||||
},
|
||||
{
|
||||
"path": "/time-line/steps",
|
||||
"name": "步骤条"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -765,16 +765,16 @@ const router = [
|
|||
meta: { title: 'mobileTimeLine 时间轴组件 - 插槽', lang: 'zh-CN' },
|
||||
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',
|
||||
meta: { title: 'mobileTimeLine 时间轴组件 - 高度', lang: 'zh-CN' },
|
||||
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',
|
||||
meta: { title: 'mobileDropdownMenu 筛选排序组件', lang: 'zh-CN' },
|
||||
|
|
|
|||
|
|
@ -10,43 +10,67 @@
|
|||
*
|
||||
-->
|
||||
<template>
|
||||
<div :class="['tiny-mobile-timeline']">
|
||||
<div
|
||||
v-for="(node, index) in state.nodes"
|
||||
:key="index"
|
||||
:style="{
|
||||
height: index === state.nodes.length - 1 ? '' : space ? space + 'px' : '88px'
|
||||
}"
|
||||
:class="['tiny-mobile-timeline__item', node.status]"
|
||||
>
|
||||
<ul class="tiny-mobile-timeline__list">
|
||||
<slot name="left" :slot-scope="node">
|
||||
<li class="tiny-mobile-timeline__date-time">
|
||||
<span class="tiny-mobile-timeline__date">{{ getDate(node[timeField]).date }}</span>
|
||||
<span class="tiny-mobile-timeline__time">{{ getDate(node[timeField]).time }}</span>
|
||||
</li>
|
||||
<div :class="['tiny-mobile-steps', { 'is-horizontal': horizontal && !vertical }]">
|
||||
<div v-if="!vertical" class="tiny-mobile-steps-normal">
|
||||
<div
|
||||
v-for="(node, index) in state.nodes"
|
||||
:key="index"
|
||||
:style="{
|
||||
width: horizontal ? 'auto' : space ? space + 'px' : 100 / state.nodes.length + '%'
|
||||
}"
|
||||
:class="['normal', getStatusCls(index)]"
|
||||
>
|
||||
<slot name="top" :slot-scope="node">
|
||||
<div class="date-time">
|
||||
<span class="time">{{ getDate(node[timeField]).date }} {{ getDate(node[timeField]).time }}</span>
|
||||
</div>
|
||||
</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 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>
|
||||
<div>
|
||||
<span class="tiny-mobile-timeline__user">{{ node.personInfo }}</span>
|
||||
<span class="tiny-mobile-timeline__tip">{{ node.overdue }}</span>
|
||||
</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>
|
||||
</slot>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -54,10 +78,29 @@
|
|||
<script>
|
||||
import { renderless, api } from '@opentiny/vue-renderless/time-line/vue'
|
||||
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 {
|
||||
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) {
|
||||
return setup({ props, context, renderless, api })
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue