Skip to content

Commit 06c83c3

Browse files
lucienstarlucienstar
committed
feat(linCmsUi): 新增时间线 展示页面
1 parent f6e58d0 commit 06c83c3

File tree

3 files changed

+476
-3
lines changed

3 files changed

+476
-3
lines changed

‎src/plugins/LinCmsUi/stage-config.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ const LinCmsUiRouter = {
273273
filePath: 'plugins/LinCmsUi/views/form/TimePicker.vue',
274274
inNav: true,
275275
icon: 'iconfont icon-jiemiansheji',
276-
276+
right: null,
277277
},
278278
{
279279
title: 'DateTimePicker 日期时间选择器',
@@ -283,7 +283,7 @@ const LinCmsUiRouter = {
283283
filePath: 'plugins/LinCmsUi/views/form/DateTimePicker.vue',
284284
inNav: true,
285285
icon: 'iconfont icon-jiemiansheji',
286-
286+
right: null,
287287
},
288288
{
289289
title: 'DatePicker 日期选择器',
@@ -293,7 +293,7 @@ const LinCmsUiRouter = {
293293
filePath: 'plugins/LinCmsUi/views/form/DatePicker.vue',
294294
inNav: true,
295295
icon: 'iconfont icon-jiemiansheji',
296-
296+
right: null,
297297
},
298298
],
299299
},
@@ -339,6 +339,28 @@ const LinCmsUiRouter = {
339339
},
340340
],
341341
},
342+
{
343+
title: 'Others',
344+
type: 'folder',
345+
name: null,
346+
route: '/lin-cms-ui/others/base',
347+
filePath: 'plugins/LinCmsUi/views/others/',
348+
inNav: true,
349+
icon: 'iconfont icon-jiemiansheji',
350+
right: null,
351+
children: [
352+
{
353+
title: 'Timeline 时间线',
354+
type: 'view',
355+
name: null,
356+
route: '/lin-cms-ui/other/timeline',
357+
filePath: 'plugins/LinCmsUi/views/other/Timeline.vue',
358+
inNav: true,
359+
icon: 'iconfont icon-jiemiansheji',
360+
right: null,
361+
},
362+
],
363+
},
342364
],
343365
}
344366

‎src/plugins/LinCmsUi/views/other/Dialog.vue‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<template>
2+
<div class="lin-container">
3+
<div class="lin-title">Dialog 对话框</div>
4+
<div class="lin-wrap-ui">
5+
<el-card style="margin-bottom:50px;">
6+
<div slot="header">
7+
<span>基础用法</span>
8+
</div>
9+
<el-row>
10+
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
11+
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
12+
<span>这是一段信息</span>
13+
<span slot="footer" class="dialog-footer">
14+
<el-button @click="dialogVisible = false">取 消</el-button>
15+
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
16+
</span>
17+
</el-dialog>
18+
</el-row>
19+
<el-collapse>
20+
<el-collapse-item title="查看代码" name="2">
21+
<div style="white-space: pre-wrap;">{{base}}</div>
22+
</el-collapse-item>
23+
</el-collapse>
24+
</el-card>
25+
<el-card style="margin-bottom:50px;">
26+
<div slot="header">
27+
<span>自定义内容</span>
28+
</div>
29+
<el-row>
30+
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
31+
32+
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
33+
<el-table :data="gridData">
34+
<el-table-column property="date" label="日期" width="150"></el-table-column>
35+
<el-table-column property="name" label="姓名" width="200"></el-table-column>
36+
<el-table-column property="address" label="地址"></el-table-column>
37+
</el-table>
38+
</el-dialog>
39+
40+
<!-- Form -->
41+
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
42+
43+
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
44+
<el-form :model="form">
45+
<el-form-item label="活动名称" :label-width="formLabelWidth">
46+
<el-input v-model="form.name" autocomplete="off"></el-input>
47+
</el-form-item>
48+
<el-form-item label="活动区域" :label-width="formLabelWidth">
49+
<el-select v-model="form.region" placeholder="请选择活动区域">
50+
<el-option label="区域一" value="shanghai"></el-option>
51+
<el-option label="区域二" value="beijing"></el-option>
52+
</el-select>
53+
</el-form-item>
54+
</el-form>
55+
<div slot="footer" class="dialog-footer">
56+
<el-button @click="dialogFormVisible = false">取 消</el-button>
57+
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
58+
</div>
59+
</el-dialog>
60+
</el-row>
61+
<el-collapse class="test" style="color:red;">
62+
<el-collapse-item title="查看代码" name="2">
63+
<div style="white-space: pre-wrap;">{{diy}}</div>
64+
</el-collapse-item>
65+
</el-collapse>
66+
</el-card>
67+
<el-card style="margin-bottom:50px;">
68+
<div slot="header">
69+
<span>⾃定义时间戳</span>
70+
</div>
71+
<el-row>
72+
<div class="block">
73+
<el-timeline>
74+
<el-timeline-item timestamp="2018/4/12" placement="top">
75+
<el-card class="timeLineCard">
76+
<h4>更新 Github 模板</h4>
77+
<p>王小虎 提交于 2018/4/12 20:46</p>
78+
</el-card>
79+
</el-timeline-item>
80+
<el-timeline-item timestamp="2018/4/3" placement="top">
81+
<el-card class="timeLineCard">
82+
<h4>更新 Github 模板</h4>
83+
<p>王小虎 提交于 2018/4/3 20:46</p>
84+
</el-card>
85+
</el-timeline-item>
86+
<el-timeline-item timestamp="2018/4/2" placement="top">
87+
<el-card class="timeLineCard">
88+
<h4>更新 Github 模板</h4>
89+
<p>王小虎 提交于 2018/4/2 20:46</p>
90+
</el-card>
91+
</el-timeline-item>
92+
</el-timeline>
93+
</div>
94+
</el-row>
95+
<el-collapse class="test" style="color:red;">
96+
<el-collapse-item title="查看代码" name="2">
97+
<div style="white-space: pre-wrap;">{{placement}}</div>
98+
</el-collapse-item>
99+
</el-collapse>
100+
</el-card>
101+
</div>
102+
</div>
103+
</template>
104+
105+
<script>
106+
export default {
107+
/* eslint-disable */
108+
name: '',
109+
components: {},
110+
data() {
111+
return {
112+
dialogVisible: false,
113+
gridData: [{
114+
date: '2016-05-02',
115+
name: '王小虎',
116+
address: '上海市普陀区金沙江路 1518 弄'
117+
}, {
118+
date: '2016-05-04',
119+
name: '王小虎',
120+
address: '上海市普陀区金沙江路 1518 弄'
121+
}, {
122+
date: '2016-05-01',
123+
name: '王小虎',
124+
address: '上海市普陀区金沙江路 1518 弄'
125+
}, {
126+
date: '2016-05-03',
127+
name: '王小虎',
128+
address: '上海市普陀区金沙江路 1518 弄'
129+
}],
130+
dialogTableVisible: false,
131+
dialogFormVisible: false,
132+
form: {
133+
name: '',
134+
region: '',
135+
date1: '',
136+
date2: '',
137+
delivery: false,
138+
type: [],
139+
resource: '',
140+
desc: ''
141+
},
142+
formLabelWidth: '120px'
143+
};
144+
},
145+
// 计算属性设置
146+
computed: {},
147+
// 数据变更监听
148+
watch: {},
149+
mounted() {
150+
this.init()
151+
},
152+
methods: {
153+
handleClose(done) {
154+
this.$confirm('确认关闭？')
155+
.then(_ => {
156+
done();
157+
})
158+
.catch(_ => {});
159+
},
160+
// 执行获取数据等初始化动作
161+
init() {},
162+
},
163+
}
164+
</script>
165+
166+
<style lang="scss" scoped>
167+
@import '../../assets/style/container';
168+
169+
.demonstration {
170+
display: block;
171+
color: #8492a6;
172+
font-size: 14px;
173+
margin-bottom: 20px;
174+
}
175+
</style>

0 commit comments

Comments
 (0)