Skip to content

Commit 5f902b7

Browse files
vincentzycvincentzyc
committed
图片轮播
1 parent 8e7dffb commit 5f902b7

File tree

7 files changed

+171
-121
lines changed

7 files changed

+171
-121
lines changed

‎src/assets/css/config.styl‎

Lines changed: 103 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,108 @@
11
.widget-config-container {
2-
position: relative;
2+
position: relative;
33

4-
.ghost {
4+
.ghost {
55
position: relative;
6-
&::after {
7-
display: block;
8-
content: '';
9-
position: absolute;
10-
top: 0;
11-
left: 0;
12-
right: 0;
6+
7+
&::after {
8+
display: block;
9+
content: '';
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
right: 0;
1314
bottom: 0;
14-
background: #fff;
15-
}
16-
}
17-
18-
.el-header {
19-
border-bottom: solid 2px #e4e7ed;
20-
padding: 0 5px;
21-
}
22-
23-
.move-icon {
24-
font-size: 20px;
25-
color: #999;
26-
margin: 0 10px;
27-
cursor: move;
28-
29-
&:hover {
30-
color: #409EFF;
31-
}
32-
}
33-
.delect-icon {
34-
font-size: 20px;
35-
color: #999;
36-
margin-left: 5px;
37-
cursor: pointer;
38-
39-
&:hover {
40-
color: #f56c6c;
41-
}
42-
}
43-
44-
.avatar-uploader .el-upload {
45-
border: 1px dashed #d9d9d9;
46-
border-radius: 6px;
47-
cursor: pointer;
48-
position: relative;
49-
overflow: hidden;
50-
}
51-
.avatar-uploader .el-upload:hover {
52-
border-color: $primary-color;
53-
}
54-
.avatar-uploader-icon {
55-
font-size: 28px;
56-
color: #8c939d;
57-
width: 100px;
58-
height: 100px;
59-
line-height: 100px;
60-
text-align: center;
61-
border: 1px dashed #d9d9d9;
62-
}
63-
.avatar {
64-
width: 100px;
65-
height: 100px;
66-
display: block;
67-
}
68-
69-
.config-tab {
70-
height: 45px;
71-
line-height: 45px;
72-
display: inline-block;
73-
text-align: center;
74-
font-size: 14px;
75-
font-weight: 500;
76-
position: relative;
77-
cursor: pointer;
78-
79-
&.active {
80-
border-bottom: solid 2px $primary-color;
81-
}
82-
}
83-
84-
.config-content {
85-
padding: 10px;
86-
87-
.el-form-item__label {
88-
padding: 0;
89-
font-weight: 500;
90-
}
91-
92-
.el-form-item {
93-
border-bottom: solid 1px #e1e1e1;
94-
padding-bottom: 10px;
95-
}
96-
}
15+
background: #fff;
16+
}
17+
}
18+
19+
.el-header {
20+
border-bottom: solid 2px #e4e7ed;
21+
padding: 0 5px;
22+
}
23+
24+
.absolute-top-right {
25+
position: absolute;
26+
top: 0;
27+
right: 0;
28+
}
29+
30+
.move-icon {
31+
font-size: 20px;
32+
color: #999;
33+
margin: 0 10px;
34+
cursor: move;
35+
36+
&:hover {
37+
color: #409EFF;
38+
}
39+
}
40+
41+
.delect-icon {
42+
font-size: 20px;
43+
color: #999;
44+
margin-left: 5px;
45+
cursor: pointer;
46+
47+
&:hover {
48+
color: #f56c6c;
49+
}
50+
}
51+
52+
.avatar-uploader .el-upload {
53+
border: 1px dashed #d9d9d9;
54+
border-radius: 6px;
55+
cursor: pointer;
56+
position: relative;
57+
overflow: hidden;
58+
}
59+
60+
.avatar-uploader .el-upload:hover {
61+
border-color: $primary-color;
62+
}
63+
64+
.avatar-uploader-icon {
65+
font-size: 28px;
66+
color: #8c939d;
67+
width: 100px;
68+
height: 100px;
69+
line-height: 100px;
70+
text-align: center;
71+
border: 1px dashed #d9d9d9;
72+
}
73+
74+
.avatar {
75+
width: 100px;
76+
height: 100px;
77+
display: block;
78+
}
79+
80+
.config-tab {
81+
height: 45px;
82+
line-height: 45px;
83+
display: inline-block;
84+
text-align: center;
85+
font-size: 14px;
86+
font-weight: 500;
87+
position: relative;
88+
cursor: pointer;
89+
90+
&.active {
91+
border-bottom: solid 2px $primary-color;
92+
}
93+
}
94+
95+
.config-content {
96+
padding: 10px;
97+
98+
.el-form-item__label {
99+
padding: 0;
100+
font-weight: 500;
101+
}
102+
103+
.el-form-item {
104+
border-bottom: solid 1px #e1e1e1;
105+
padding-bottom: 10px;
106+
}
107+
}
97108
}

‎src/assets/css/index.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ $primary-background-color = #ecf5ff;
1818

1919
.form-edit-wrapper {
2020
display: flex !important;
21-
max-width: calc(45vw + 720px);
21+
max-width: calc(40vw + 720px);
2222
overflow: auto;
2323
flex: auto;
2424
}

‎src/assets/css/widget.styl‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -276,12 +276,6 @@ $primary-background-color = #d8e8fa;
276276
align-items: center;
277277
}
278278

279-
.el-carousel__item h3 {
280-
color: #475669;
281-
font-size: 18px;
282-
opacity: 0.75;
283-
}
284-
285279
.el-carousel__item:nth-child(2n) {
286280
background-color: #99a9bf;
287281
}

‎src/assets/json/widget.json‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,10 +153,19 @@
153153
"imgComponents": [{
154154
"type": "imgSlide",
155155
"name": "图片轮播",
156-
"value": ["static/img/theme1.jpg","static/img/theme2.jpg","static/img/theme3.jpg"],
156+
"value": [{
157+
"url": "www.baidu.com",
158+
"image": "static/img/theme1.jpg"
159+
}, {
160+
"url": "qq.com",
161+
"image": "static/img/theme2.jpg"
162+
}, {
163+
"url": "jd.com",
164+
"image": "static/img/theme3.jpg"
165+
}],
157166
"style": {
158-
"margin": "0px 0px 0px 0px",
159-
"height": 250
167+
"margin": "0px 0px 0px 0px",
168+
"height": 250
160169
}
161170
}, {
162171
"type": "imgShow",

‎src/components/widget-config.vue‎

Lines changed: 51 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -35,24 +35,51 @@
3535
</el-select>
3636
</el-form-item>
3737
<el-form-item label="选项" v-if="selectWg.hasOwnProperty('options')">
38-
<template>
39-
<draggable element="ul" :list="selectWg.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.move-icon'}">
40-
<li v-for="(item, index) in selectWg.options" :key="index">
41-
<div class="flex align-middle">
42-
<el-input size="mini" v-model="selectWg.options[index]"></el-input>
43-
<i class="el-icon-menu move-icon"></i>
44-
<i class="el-icon-delete delect-icon" @click="handleOptionsRemove(index)"></i>
45-
</div>
46-
</li>
47-
</draggable>
48-
</template>
38+
<draggable element="ul" :list="selectWg.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.move-icon'}">
39+
<li v-for="(item, index) in selectWg.options" :key="index">
40+
<div class="flex align-middle">
41+
<el-input size="mini" v-model="selectWg.options[index]"></el-input>
42+
<i class="el-icon-menu move-icon"></i>
43+
<i class="el-icon-delete delect-icon" @click="handleOptionsRemove(index)"></i>
44+
</div>
45+
</li>
46+
</draggable>
4947
<div style="margin-left: 22px;">
5048
<el-button type="text" @click="handleAddOption()">添加选项</el-button>
5149
</div>
5250
</el-form-item>
53-
<template v-if="selectWg.type === 'imgShow'">
54-
<el-form-item label="图片上传">
55-
<ImgUpload :value.sync="selectWg.value"/>
51+
<el-form-item label="图片上传" v-if="selectWg.type === 'imgShow'">
52+
<ImgUpload :value.sync="selectWg.value"/>
53+
</el-form-item>
54+
<template v-if="selectWg.type ==='imgSlide'">
55+
<el-form-item label="轮播图片设置">
56+
<draggable element="ul" :list="selectWg.value" :options="{group:{ name:'slideList'}, ghostClass: 'ghost',handle: '.move-icon'}">
57+
<li v-for="(item, index) in selectWg.value" :key="index" style="border:1px dashed #999">
58+
<div class="pd10">
59+
<div class="relative flex flex-center">
60+
<ImgUpload :value.sync="item.image"/>
61+
<div class="absolute-top-right">
62+
<i class="el-icon-menu move-icon"></i>
63+
<i class="el-icon-delete delect-icon" @click="handleSlideRemove(index)"></i>
64+
</div>
65+
</div>
66+
<div class="flex">
67+
<span class="flex-none">图片地址：</span>
68+
<el-input size="mini" placeholder="请输入图片地址" v-model="item.image"></el-input>
69+
</div>
70+
<div class="flex">
71+
<span class="flex-none">跳转地址：</span>
72+
<el-input size="mini" placeholder="请输入跳转地址" v-model="item.url"></el-input>
73+
</div>
74+
</div>
75+
</li>
76+
</draggable>
77+
<div class="text-center">
78+
<el-button type="text" @click="handleAddSlide()">添加图片</el-button>
79+
</div>
80+
</el-form-item>
81+
<el-form-item label="图片高度(px)">
82+
<el-input-number v-model="selectWg.style.height" :min="100" :max="300" size="small"/>
5683
</el-form-item>
5784
</template>
5885
</el-collapse-item>
@@ -180,7 +207,16 @@ export default {
180207
},
181208
handleAddOption() {
182209
this.selectWg.options.push('新选项')
183-
}
210+
},
211+
handleSlideRemove(index) {
212+
this.selectWg.value.splice(index, 1)
213+
},
214+
handleAddSlide() {
215+
this.selectWg.value.push({
216+
url: "https://www.baidu.com/",
217+
image: "https://www.baidu.com/img/bd_logo1.png"
218+
})
219+
},
184220
}
185221
}
186222
</script>

‎src/components/widget-form-list.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,9 @@
109109
<div class="wg-imgslide" v-if="item.type === 'imgSlide'">
110110
<div class="flex flex-center" :style="{margin:item.style.margin}">
111111
<el-carousel :interval="3000" arrow="never" :style="{width:'100%',height:item.style.height+'px'}">
112-
<el-carousel-item v-for="url in item.value" :key="url">
113-
<!-- <span>{{ url }}</span> -->
114-
<img :src="url" alt="banner" style="width:100%;height:100%">
112+
<el-carousel-item v-for="(list,key) in item.value" :key="key">
113+
<img v-if="list.image" :src="list.image" alt="banner" style="width:100%;height:100%">
114+
<span v-else>{{ '图片' + key+1 }}</span>
115115
</el-carousel-item>
116116
</el-carousel>
117117
</div>

‎src/views/home.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
</el-main>
4646
</el-container>
4747

48-
<el-aside class="widget-config-container" style="min-width:300px;width:25vw">
48+
<el-aside class="widget-config-container" style="min-width:300px;width:20vw">
4949
<el-container>
5050
<el-header height="45px" class="flex">
5151
<div class="config-tab flex-auto" :class="{active: configTab=='widget'}" @click="handleConfigSelect('widget')">字段属性</div>

0 commit comments

Comments
 (0)