Skip to content

Commit 9d064d0

Browse files
vanoneangvanoneang
authored
feat(custom): gallery (#186)
1 parent 73bf780 commit 9d064d0

File tree

9 files changed

+169
-34
lines changed

9 files changed

+169
-34
lines changed

‎public/iconfont.css‎

Lines changed: 10 additions & 6 deletions
Large diffs are not rendered by default.

‎src/config/stage/plugins.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// 本文件是自动生成, 请勿修改
2-
import ImgsUpload from '@/plugins/ImgsUpload/stage-config'
32
import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
3+
import custom from '@/plugins/custom/stage-config'
44

55
const pluginsConfig = [
6-
ImgsUpload,
76
LinCmsUi,
7+
custom,
88
]
99

1010
export default pluginsConfig

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

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/plugins/ImgsUpload/README.md‎ renamed to ‎src/plugins/custom/README.md‎

File renamed without changes.

‎src/plugins/ImgsUpload/assets/img/logo.png‎ renamed to ‎src/plugins/custom/assets/img/logo.png‎

File renamed without changes.

‎src/plugins/ImgsUpload/package.json‎ renamed to ‎src/plugins/custom/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "lc-plugin-imgs-upload",
2+
"name": "lc-plugin-custom",
33
"title": "图像上传组件示例",
44
"version": "1.0.0",
55
"_linVersion": "0.0.1-alpha.3",

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const CustomRouter = {
2+
route: null,
3+
name: null,
4+
title: '自定义组件',
5+
type: 'folder',
6+
icon: 'iconfont icon-zidingyi',
7+
filePath: 'views/custom/',
8+
order: null,
9+
inNav: true,
10+
children: [
11+
{
12+
title: '图像上传展示',
13+
type: 'view',
14+
name: 'ImgsUploadDemo',
15+
route: '/imgs-upload/stage1',
16+
filePath: 'plugins/custom/views/Demo.vue',
17+
inNav: true,
18+
icon: 'iconfont icon-zidingyi',
19+
right: null,
20+
},
21+
{
22+
title: 'gallery 画廊',
23+
type: 'view',
24+
name: 'GalleryDemo',
25+
route: '/custom/gallery',
26+
filePath: 'plugins/custom/views/Gallery.vue',
27+
inNav: true,
28+
icon: 'iconfont icon-zidingyi',
29+
right: null,
30+
},
31+
],
32+
}
33+
34+
export default CustomRouter

‎src/plugins/ImgsUpload/views/Demo.vue‎ renamed to ‎src/plugins/custom/views/Demo.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div class="lin-container">
33
<div class="lin-title">插件ImgsUpload舞台页面</div>
4-
<el-divider></el-divider>
54
<div class="lin-wrap">
65
<el-form label-width="220px">
76
<el-form-item label="带初始化至少4张, 至多5张">

‎src/plugins/custom/views/Gallery.vue‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<div class="lin-container">
3+
<div class="lin-title">画廊插件演示</div>
4+
<div class="lin-wrap container">
5+
<div class="imgs-upload-container">
6+
<div
7+
class="img-box"
8+
@click="preview(index)"
9+
v-for="(url, index) in urls"
10+
:key="index">
11+
<el-image
12+
class="thumb-item-img"
13+
:src="url"
14+
fit="cover"
15+
style="width: 100%; height: 100%;"></el-image>
16+
<div class="control">
17+
<div class="preview">
18+
<i class="el-icon-view"></i>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
<source-code link="https://github.com/TaleLin/lin-cms-vue/blob/master/src/plugins/LinCmsUi/views/table/TableCombo.vue"></source-code>
25+
</div>
26+
</template>
27+
28+
<script>
29+
export default {
30+
data() {
31+
return {
32+
urls: [
33+
'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-1.png',
34+
'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-2.png',
35+
'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-3.png',
36+
'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-4.png',
37+
'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-5.png',
38+
],
39+
}
40+
},
41+
methods: {
42+
preview(index) {
43+
this.$imagePreview({
44+
images: this.urls,
45+
index,
46+
})
47+
},
48+
},
49+
}
50+
</script>
51+
52+
<style lang="scss" scoped>
53+
.container {
54+
padding: 20px 30px;
55+
56+
.imgs-upload-container {
57+
display: flex;
58+
flex-wrap: wrap;
59+
60+
.img-box {
61+
border: 1px dashed #d9d9d9;
62+
border-radius: 3px;
63+
-webkit-transition: all .1s;
64+
transition: all .1s;
65+
color: #666666;
66+
margin-right: 1em;
67+
margin-bottom: 1em;
68+
width: 200px;
69+
height: 150px;
70+
cursor: pointer;
71+
font-size: 12px;
72+
text-align: center;
73+
position: relative;
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
overflow: hidden;
78+
line-height: 1.3;
79+
flex-direction: column;
80+
81+
.el-image {
82+
width: 100%;
83+
height: 100%;
84+
}
85+
86+
.control {
87+
display: flex;
88+
-webkit-box-align: center;
89+
-ms-flex-align: center;
90+
align-items: center;
91+
-webkit-box-pack: center;
92+
-ms-flex-pack: center;
93+
justify-content: center;
94+
position: absolute;
95+
width: 100%;
96+
height: 100%;
97+
top: 0;
98+
left: 0;
99+
opacity: 0;
100+
background-color: rgba(0, 0, 0, 0.3);
101+
-webkit-transition: all .3s;
102+
transition: all .3s;
103+
-webkit-transition-delay: .1s;
104+
transition-delay: .1s;
105+
106+
.preview {
107+
color: white;
108+
font-size: 2em;
109+
transition: all .2s;
110+
}
111+
112+
}
113+
114+
&:hover {
115+
.control {
116+
opacity: 1;
117+
}
118+
}
119+
}
120+
}
121+
}
122+
</style>

0 commit comments

Comments
 (0)