Skip to content

Commit 7284cfb

Browse files
lucienstarlucienstar
committed
feat(linCmsUi): 新增 Loading 组件展示页
1 parent 4d88c29 commit 7284cfb

File tree

2 files changed

+220
-0
lines changed

2 files changed

+220
-0
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,16 @@ const LinCmsUiRouter = {
337337
icon: 'iconfont icon-jiemiansheji',
338338

339339
},
340+
{
341+
title: 'Loading 加载',
342+
type: 'view',
343+
name: null,
344+
route: '/lin-cms-ui/notice/loading',
345+
filePath: 'plugins/LinCmsUi/views/notice/Loading.vue',
346+
inNav: true,
347+
icon: 'iconfont icon-jiemiansheji',
348+
349+
},
340350
],
341351
},
342352
{

‎src/plugins/LinCmsUi/views/notice/Loading.vue‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<template>
2+
<div class="lin-container">
3+
<div class="lin-title">Loading 加载</div>
4+
<div class="lin-wrap-ui loadingDemo">
5+
<el-card style="margin-bottom:50px;">
6+
<div slot="header">
7+
<span>基础用法</span>
8+
</div>
9+
<el-row>
10+
<div>
11+
<el-table v-loading="loading" :data="tableData" style="width: 100%">
12+
<el-table-column prop="date" label="日期" width="180">
13+
</el-table-column>
14+
<el-table-column prop="name" label="姓名" width="180">
15+
</el-table-column>
16+
<el-table-column prop="address" label="地址">
17+
</el-table-column>
18+
</el-table>
19+
</div>
20+
</el-row>
21+
<el-collapse>
22+
<el-collapse-item title="查看代码" name="2">
23+
<div style="white-space: pre-wrap;">{{base}}</div>
24+
</el-collapse-item>
25+
</el-collapse>
26+
</el-card>
27+
<el-card style="margin-bottom:50px;">
28+
<div slot="header">
29+
<span>不同状态</span>
30+
</div>
31+
<el-row>
32+
<div>
33+
<template>
34+
<el-table v-loading="loading1"
35+
element-loading-text="拼命加载中"
36+
element-loading-spinner="el-icon-loading"
37+
element-loading-background="rgba(0, 0, 0, 0.8)"
38+
:data="tableData1" style="width: 100%">
39+
<el-table-column prop="date" label="日期" width="180">
40+
</el-table-column>
41+
<el-table-column prop="name" label="姓名" width="180">
42+
</el-table-column>
43+
<el-table-column prop="address" label="地址">
44+
</el-table-column>
45+
</el-table>
46+
</template>
47+
</div>
48+
</el-row>
49+
<el-collapse class="test" style="color:red;">
50+
<el-collapse-item title="查看代码" name="2">
51+
<div style="white-space: pre-wrap;">{{diy}}</div>
52+
</el-collapse-item>
53+
</el-collapse>
54+
</el-card>
55+
</div>
56+
</div>
57+
</template>
58+
59+
<script>
60+
export default {
61+
/* eslint-disable */
62+
name: 'LinCmsUiButton',
63+
components: {},
64+
data() {
65+
return {
66+
tableData: [{
67+
date: '2016-05-03',
68+
name: '王小虎',
69+
address: '上海市普陀区金沙江路 1518 弄',
70+
}, {
71+
date: '2016-05-02',
72+
name: '王小虎',
73+
address: '上海市普陀区金沙江路 1518 弄',
74+
}, {
75+
date: '2016-05-04',
76+
name: '王小虎',
77+
address: '上海市普陀区金沙江路 1518 弄',
78+
}],
79+
loading: true,
80+
tableData1: [{
81+
date: '2016-05-03',
82+
name: '王小虎',
83+
address: '上海市普陀区金沙江路 1518 弄',
84+
}, {
85+
date: '2016-05-02',
86+
name: '王小虎',
87+
address: '上海市普陀区金沙江路 1518 弄',
88+
}, {
89+
date: '2016-05-04',
90+
name: '王小虎',
91+
address: '上海市普陀区金沙江路 1518 弄',
92+
}],
93+
loading1: true,
94+
base: `<template>
95+
<el-table
96+
v-loading="loading"
97+
element-loading-text="拼命加载中"
98+
element-loading-spinner="el-icon-loading"
99+
element-loading-background="rgba(0, 0, 0, 0.8)"
100+
:data="tableData"
101+
style="width: 100%">
102+
<el-table-column
103+
prop="date"
104+
label="日期"
105+
width="180">
106+
</el-table-column>
107+
<el-table-column
108+
prop="name"
109+
label="姓名"
110+
width="180">
111+
</el-table-column>
112+
<el-table-column
113+
prop="address"
114+
label="地址">
115+
</el-table-column>
116+
</el-table>
117+
</template>
118+
119+
<script>
120+
export default {
121+
data() {
122+
return {
123+
tableData: [{
124+
date: '2016-05-03',
125+
name: '王小虎',
126+
address: '上海市普陀区金沙江路 1518 弄'
127+
}, {
128+
date: '2016-05-02',
129+
name: '王小虎',
130+
address: '上海市普陀区金沙江路 1518 弄'
131+
}, {
132+
date: '2016-05-04',
133+
name: '王小虎',
134+
address: '上海市普陀区金沙江路 1518 弄'
135+
}],
136+
loading: true
137+
};
138+
}
139+
};
140+
<\/script>`,
141+
diy: `
142+
<template>
143+
<el-table
144+
v-loading="loading"
145+
element-loading-text="拼命加载中"
146+
element-loading-spinner="el-icon-loading"
147+
element-loading-background="rgba(0, 0, 0, 0.8)"
148+
:data="tableData"
149+
style="width: 100%">
150+
<el-table-column
151+
prop="date"
152+
label="日期"
153+
width="180">
154+
</el-table-column>
155+
<el-table-column
156+
prop="name"
157+
label="姓名"
158+
width="180">
159+
</el-table-column>
160+
<el-table-column
161+
prop="address"
162+
label="地址">
163+
</el-table-column>
164+
</el-table>
165+
</template>
166+
167+
<script>
168+
export default {
169+
data() {
170+
return {
171+
tableData: [{
172+
date: '2016-05-03',
173+
name: '王小虎',
174+
address: '上海市普陀区金沙江路 1518 弄'
175+
}, {
176+
date: '2016-05-02',
177+
name: '王小虎',
178+
address: '上海市普陀区金沙江路 1518 弄'
179+
}, {
180+
date: '2016-05-04',
181+
name: '王小虎',
182+
address: '上海市普陀区金沙江路 1518 弄'
183+
}],
184+
loading: true
185+
};
186+
}
187+
};
188+
<\/script>`,
189+
}
190+
},
191+
// 计算属性设置
192+
computed: {},
193+
// 数据变更监听
194+
watch: {},
195+
mounted() {
196+
this.init()
197+
},
198+
methods: {
199+
// 执行获取数据等初始化动作
200+
init() {},
201+
},
202+
}
203+
</script>
204+
205+
<style lang="scss" scoped>
206+
@import '../../assets/style/container.scss';
207+
.loadingDemo /deep/ .el-table {
208+
border: none;
209+
}
210+
</style>

0 commit comments

Comments
 (0)