Skip to content

Commit 28b1c73

Browse files
lucienstarlucienstar
committed
feat(新增 Dialog 弹窗组件展示页):
1 parent 06c83c3 commit 28b1c73

File tree

5 files changed

+241
-48
lines changed

5 files changed

+241
-48
lines changed

‎src/assets/styles/realize/element-variables.scss‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -325,27 +325,12 @@ thead tr {
325325
font-size: 18px;
326326
top: -5px;
327327
}
328-
329-
// dialog
330-
.el-dialog__footer {
331-
text-align: left;
332-
padding-left: 30px;
333-
}
334-
328+
// el-dialog
335329
.el-dialog__title {
336330
color: $parent-title-color;
337331
font-size: 16px;
338332
font-weight: 500;
339333
}
340-
341-
.el-dialog__header {
342-
padding-left: 30px;
343-
}
344-
345-
.el-dialog__body {
346-
padding: 30px;
347-
}
348-
349334
// tab
350335
.el-tabs__item.is-active {
351336
color: $theme;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,16 @@ const LinCmsUiRouter = {
349349
icon: 'iconfont icon-jiemiansheji',
350350
right: null,
351351
children: [
352+
{
353+
title: 'Dialog 对话框',
354+
type: 'view',
355+
name: null,
356+
route: '/lin-cms-ui/other/dialog',
357+
filePath: 'plugins/LinCmsUi/views/other/Dialog.vue',
358+
inNav: true,
359+
icon: 'iconfont icon-jiemiansheji',
360+
right: null,
361+
},
352362
{
353363
title: 'Timeline 时间线',
354364
type: 'view',

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

Lines changed: 205 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<!-- Form -->
4141
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
4242

43-
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
43+
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" class="dialogForm">
4444
<el-form :model="form">
4545
<el-form-item label="活动名称" :label-width="formLabelWidth">
4646
<el-input v-model="form.name" autocomplete="off"></el-input>
@@ -66,35 +66,48 @@
6666
</el-card>
6767
<el-card style="margin-bottom:50px;">
6868
<div slot="header">
69-
<span>⾃定义时间戳</span>
69+
<span>嵌套的 Dialog</span>
7070
</div>
7171
<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>
72+
<span class="demonstration">如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性</span>
73+
<template>
74+
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
75+
76+
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
77+
<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
78+
</el-dialog>
79+
<div slot="footer" class="dialog-footer">
80+
<el-button @click="outerVisible = false">取 消</el-button>
81+
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
82+
</div>
83+
</el-dialog>
84+
</template>
85+
</el-row>
86+
<el-collapse class="test" style="color:red;">
87+
<el-collapse-item title="查看代码" name="2">
88+
<div style="white-space: pre-wrap;">{{appendToBody}}</div>
89+
</el-collapse-item>
90+
</el-collapse>
91+
</el-card>
92+
<el-card style="margin-bottom:50px;">
93+
<div slot="header">
94+
<span>居中布局</span>
95+
</div>
96+
<el-row>
97+
<span class="demonstration">标题和底部可水平居中</span>
98+
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
99+
100+
<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
101+
<span>需要注意的是内容是默认不居中的</span>
102+
<span slot="footer" class="dialog-footer">
103+
<el-button @click="centerDialogVisible = false">取 消</el-button>
104+
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
105+
</span>
106+
</el-dialog>
94107
</el-row>
95108
<el-collapse class="test" style="color:red;">
96109
<el-collapse-item title="查看代码" name="2">
97-
<div style="white-space: pre-wrap;">{{placement}}</div>
110+
<div style="white-space: pre-wrap;">{{center}}</div>
98111
</el-collapse-item>
99112
</el-collapse>
100113
</el-card>
@@ -105,12 +118,114 @@
105118
<script>
106119
export default {
107120
/* eslint-disable */
108-
name: '',
109-
components: {},
110-
data() {
111-
return {
112-
dialogVisible: false,
113-
gridData: [{
121+
name: '',
122+
components: {},
123+
data() {
124+
return {
125+
centerDialogVisible: false,
126+
outerVisible: false,
127+
innerVisible: false,
128+
dialogVisible: false,
129+
gridData: [{
130+
date: '2016-05-02',
131+
name: '王小虎',
132+
address: '上海市普陀区金沙江路 1518 弄'
133+
}, {
134+
date: '2016-05-04',
135+
name: '王小虎',
136+
address: '上海市普陀区金沙江路 1518 弄'
137+
}, {
138+
date: '2016-05-01',
139+
name: '王小虎',
140+
address: '上海市普陀区金沙江路 1518 弄'
141+
}, {
142+
date: '2016-05-03',
143+
name: '王小虎',
144+
address: '上海市普陀区金沙江路 1518 弄'
145+
}],
146+
dialogTableVisible: false,
147+
dialogFormVisible: false,
148+
form: {
149+
name: '',
150+
region: '',
151+
date1: '',
152+
date2: '',
153+
delivery: false,
154+
type: [],
155+
resource: '',
156+
desc: ''
157+
},
158+
formLabelWidth: '120px',
159+
base: `
160+
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
161+
162+
<el-dialog
163+
title="提示"
164+
:visible.sync="dialogVisible"
165+
width="30%"
166+
:before-close="handleClose">
167+
<span>这是一段信息</span>
168+
<span slot="footer" class="dialog-footer">
169+
<el-button @click="dialogVisible = false">取 消</el-button>
170+
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
171+
</span>
172+
</el-dialog>
173+
174+
<script>
175+
export default {
176+
data() {
177+
return {
178+
dialogVisible: false
179+
};
180+
},
181+
methods: {
182+
handleClose(done) {
183+
this.$confirm('确认关闭？')
184+
.then(_ => {
185+
done();
186+
})
187+
.catch(_ => {});
188+
}
189+
}
190+
};
191+
<\/script>`,
192+
diy: `<!-- Table -->
193+
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
194+
195+
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
196+
<el-table :data="gridData">
197+
<el-table-column property="date" label="日期" width="150"></el-table-column>
198+
<el-table-column property="name" label="姓名" width="200"></el-table-column>
199+
<el-table-column property="address" label="地址"></el-table-column>
200+
</el-table>
201+
</el-dialog>
202+
203+
<!-- Form -->
204+
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
205+
206+
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
207+
<el-form :model="form">
208+
<el-form-item label="活动名称" :label-width="formLabelWidth">
209+
<el-input v-model="form.name" autocomplete="off"></el-input>
210+
</el-form-item>
211+
<el-form-item label="活动区域" :label-width="formLabelWidth">
212+
<el-select v-model="form.region" placeholder="请选择活动区域">
213+
<el-option label="区域一" value="shanghai"></el-option>
214+
<el-option label="区域二" value="beijing"></el-option>
215+
</el-select>
216+
</el-form-item>
217+
</el-form>
218+
<div slot="footer" class="dialog-footer">
219+
<el-button @click="dialogFormVisible = false">取 消</el-button>
220+
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
221+
</div>
222+
</el-dialog>
223+
224+
<script>
225+
export default {
226+
data() {
227+
return {
228+
gridData: [{
114229
date: '2016-05-02',
115230
name: '王小虎',
116231
address: '上海市普陀区金沙江路 1518 弄'
@@ -140,6 +255,61 @@ export default {
140255
desc: ''
141256
},
142257
formLabelWidth: '120px'
258+
};
259+
}
260+
};
261+
<\/script>`,
262+
appendToBody: `
263+
<template>
264+
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
265+
266+
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
267+
<el-dialog
268+
width="30%"
269+
title="内层 Dialog"
270+
:visible.sync="innerVisible"
271+
append-to-body>
272+
</el-dialog>
273+
<div slot="footer" class="dialog-footer">
274+
<el-button @click="outerVisible = false">取 消</el-button>
275+
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
276+
</div>
277+
</el-dialog>
278+
</template>
279+
280+
<script>
281+
export default {
282+
data() {
283+
return {
284+
outerVisible: false,
285+
innerVisible: false
286+
};
287+
}
288+
}
289+
<\/script>`,
290+
center: `<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
291+
292+
<el-dialog
293+
title="提示"
294+
:visible.sync="centerDialogVisible"
295+
width="30%"
296+
center>
297+
<span>需要注意的是内容是默认不居中的</span>
298+
<span slot="footer" class="dialog-footer">
299+
<el-button @click="centerDialogVisible = false">取 消</el-button>
300+
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
301+
</span>
302+
</el-dialog>
303+
304+
<script>
305+
export default {
306+
data() {
307+
return {
308+
centerDialogVisible: false
309+
};
310+
}
311+
};
312+
<\/script>`
143313
};
144314
},
145315
// 计算属性设置
@@ -172,4 +342,8 @@ export default {
172342
font-size: 14px;
173343
margin-bottom: 20px;
174344
}
345+
346+
.dialogForm /deep/ .el-select {
347+
width: 100%;
348+
}
175349
</style>

‎src/plugins/LinCmsUi/views/table/TableCombo.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -529,4 +529,17 @@ export default {
529529
margin: 20px;
530530
}
531531
}
532+
// dialog
533+
.tableSample /deep/ .el-dialog__footer {
534+
text-align: left;
535+
padding-left: 30px;
536+
}
537+
538+
.tableSample /deep/ .el-dialog__header {
539+
padding-left: 30px;
540+
}
541+
542+
.tableSample /deep/ .el-dialog__body {
543+
padding: 30px;
544+
}
532545
</style>

‎src/views/admin/group/GroupList.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@row-click="rowClick"
1111
v-loading="loading">
1212
</lin-table>
13-
<el-dialog :append-to-body="true" :visible.sync="dialogFormVisible" :before-close="handleClose">
13+
<el-dialog :append-to-body="true" :visible.sync="dialogFormVisible" :before-close="handleClose" class="groupListInfoDialog">
1414
<div style="margin-top:-25px;">
1515
<el-tabs v-model="activeTab" @tab-click="handleClick">
1616
<el-tab-pane label="修改信息" name="修改信息" style="margin-top:10px;">
@@ -271,4 +271,15 @@ export default {
271271
font-weight: 500;
272272
}
273273
}
274+
.groupListInfoDialog /deep/ .el-dialog__footer {
275+
text-align: left;
276+
padding-left: 30px;
277+
}
278+
.groupListInfoDialog /deep/ .el-dialog__header {
279+
padding-left: 30px;
280+
}
281+
282+
.groupListInfoDialog /deep/ .el-dialog__body {
283+
padding: 30px;
284+
}
274285
</style>

0 commit comments

Comments
 (0)