Skip to content

Commit 62ac663

Browse files
vincentzycvincentzyc
committed
可移动表单内容区
1 parent 6254d0e commit 62ac663

File tree

11 files changed

+467
-246
lines changed

11 files changed

+467
-246
lines changed

‎src/assets/css/themes.styl‎

Lines changed: 51 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,59 @@
1-
$t1-base-color = #409EFF;
2-
$t2-base-color = #fe7c01;
3-
$t3-base-color = #6e7786;
4-
51
.theme1 {
6-
width: 90%;
7-
background: #fff;
8-
margin: 0 auto 20px auto;
9-
padding: 10px 0;
10-
overflow: hidden;
2+
.widget-child-form-list {
3+
position: relative;
4+
background: #fff;
5+
box-shadow: 5px 5px 10px 0 rgba(116, 116, 116, 0.6), -5px 5px 10px 0 rgba(116, 116, 116, 0.6);
6+
}
117
}
128

139
.theme2 {
14-
width: 90%;
15-
background: #fff;
16-
margin: 0 auto 20px auto;
17-
padding: 10px 0;
18-
overflow: hidden;
10+
.widget-form-list {
11+
.widget-child-form-list {
12+
position: relative;
13+
background: #fff;
14+
padding: 10px;
15+
}
16+
17+
.wg-title:after {
18+
content: '*';
19+
color: #e10012;
20+
font-weight: 700;
21+
font-size: 14px;
22+
}
23+
24+
.wg-input, .wg-select {
25+
border: none;
26+
}
27+
28+
.widget-view:not(:last-child) .wg-item {
29+
border-bottom: 1px solid #ddd;
30+
}
31+
32+
.widget-view .wg-item:not(:last-child) {
33+
border-bottom: 1px solid #ddd;
34+
}
35+
}
1936
}
2037

2138
.theme3 {
22-
position: relative;
23-
background: #fff;
24-
padding: 10px 0;
25-
box-shadow: 5px 5px 10px 0 rgba(116, 116, 116, 0.6), -5px 5px 10px 0 rgba(116, 116, 116, 0.6);
39+
.widget-form-list {
40+
.widget-child-form-list {
41+
position: relative;
42+
background: #fff;
43+
padding: 10px;
44+
}
45+
46+
.wg-title:after {
47+
content: '*';
48+
color: #e10012;
49+
font-weight: 700;
50+
font-size: 14px;
51+
}
52+
53+
.wg-input, .wg-select {
54+
border-radius: 10px;
55+
padding: 0 10px;
56+
border: 1px solid #4936d0;
57+
}
58+
}
2659
}

‎src/assets/css/widget.styl‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ $primary-background-color = #d8e8fa;
3030

3131
.widget-form-list {
3232
min-height: 360px;
33+
padding: 1px;
3334

3435
.ghost {
3536
background: #fff;
@@ -75,6 +76,50 @@ $primary-background-color = #d8e8fa;
7576
z-index: 1009;
7677
}
7778

79+
.widget-view.no-padding {
80+
padding: 0;
81+
82+
.img-placeholder {
83+
background: #f1f1f1;
84+
}
85+
}
86+
87+
.widget-child-form-list {
88+
position: relative;
89+
transition: 0.2s;
90+
padding: 10px;
91+
92+
.el-icon-rank {
93+
display: none;
94+
position: absolute;
95+
left: -28px;
96+
top: 15px;
97+
font-size: 24px;
98+
padding: 2px;
99+
background-color: #409eff;
100+
color: #fff;
101+
z-index: 1001;
102+
cursor: move;
103+
}
104+
105+
&:hover {
106+
box-shadow: 0px 1px 10px 1px #90c7ff inset;
107+
108+
.el-icon-rank {
109+
display: block;
110+
}
111+
}
112+
113+
&.active {
114+
box-shadow: 0px 1px 10px 1px #90c7ff;
115+
z-index: 1111;
116+
117+
.el-icon-rank {
118+
display: block;
119+
}
120+
}
121+
}
122+
78123
.widget-view {
79124
margin: 0;
80125
padding: 5px 10px;

‎src/assets/js/page-config.js‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,30 @@
11
export default {
2-
"pageConfig": {
3-
"title": "云忆网络",
4-
"backgroundColor": "#fff",
5-
"backgroundImage": null,
6-
"theme": null,
7-
"countId": null
2+
pageConfig: {
3+
// 重置数据用，改默认值的话需要改store的common
4+
list: [],
5+
title: "云忆网络",
6+
statsCode: "",
7+
theme: "",
8+
style: {
9+
backgroundColor: "#fff",
10+
backgroundImage: ""
11+
}
812
},
9-
"themes": [
13+
themes: [
1014
{
11-
"value": "theme1",
12-
"name": "主题1",
13-
"banner": "static/img/theme1.jpg",
14-
"backgroundColor": "#4a9bed",
15-
"contentWidth": "100%",
16-
"borderRadius": false
15+
value: "theme1",
16+
name: "主题1",
17+
pageData:""
1718
},
1819
{
19-
"value": "theme2",
20-
"name": "主题2",
21-
"banner": "static/img/theme2.jpg",
22-
"backgroundColor": "#707988",
23-
"contentWidth": "80%",
24-
"borderRadius": true
20+
value: "theme2",
21+
name: "主题2",
22+
pageData:""
2523
},
2624
{
27-
"value": "theme3",
28-
"name": "主题3",
29-
"banner": "static/img/theme3.jpg",
30-
"backgroundColor": "#ffffff",
31-
"margin": "-50px 20px 20px 20px",
32-
"borderRadius": true
25+
value: "theme3",
26+
name: "主题3",
27+
pageData:""
3328
}
3429
]
3530
}

‎src/assets/js/widget.js‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,8 +183,13 @@ export default {
183183
],
184184
"style": {
185185
"margin": "0px 0px 0px 0px",
186-
"btnStyle": {
187-
"background": "#409EFF"
186+
isImgBtn: false,
187+
value: "",
188+
btnStyle: {
189+
borderRadius: '20px',
190+
borderradius: 20,
191+
background: "#409EFF",
192+
color: "#fff"
188193
}
189194
}
190195
}
@@ -249,5 +254,21 @@ export default {
249254
"margin": "20px 0px 20px 0px"
250255
}
251256
}
257+
],
258+
"advancedComponents": [
259+
{
260+
"type": "formList",
261+
"name": "表单内容区",
262+
"list": [],
263+
"style": {
264+
margin: "10px 20px 0px 20px",
265+
borderradius: 10,
266+
borderRadius: '10px',
267+
borderColor: "#fff",
268+
borderwidth: 3,
269+
borderWidth: '3px',
270+
borderStyle:"solid"
271+
}
272+
}
252273
]
253274
}

‎src/components/page-config.vue‎

Lines changed: 19 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,23 @@
11
<template>
22
<div class="form-config-container">
33
<el-form label-position="top">
4-
<el-collapse v-model="activeName" accordion>
5-
<el-collapse-item title="基础设置" name="base">
6-
<el-form-item label="页面标题">
7-
<el-input v-model="pageData.config.title"></el-input>
8-
</el-form-item>
9-
<el-form-item label="页面背景色">
10-
<el-color-picker v-model="pageData.config.backgroundColor" />
11-
</el-form-item>
12-
<el-form-item label="页面背景图片">
13-
<ImgUpload :value.sync="pageData.config.backgroundImage" />
14-
</el-form-item>
15-
<el-form-item label="页面统计ID">
16-
<el-input type="number" v-model="pageData.config.countId"></el-input>
17-
</el-form-item>
18-
<el-form-item label="主题" v-if="themes.length>0">
19-
<el-radio-group v-model="selectTheme" @change="setTheme">
20-
<el-radio-button v-for="item in themes" :label="item.value" :key="item.value">{{item.name}}</el-radio-button>
21-
</el-radio-group>
22-
</el-form-item>
23-
</el-collapse-item>
24-
25-
<el-collapse-item title="主题设置" name="theme" v-if="pageData.config.theme">
26-
<el-form-item label="图片上传">
27-
<ImgUpload :value.sync="pageData.config.theme.banner" />
28-
</el-form-item>
29-
<el-form-item label="内容区域宽度" v-if="pageData.config.theme.hasOwnProperty('contentWidth')">
30-
<el-radio-group v-model="pageData.config.theme.contentWidth" size="mini">
31-
<el-radio-button label="100%"></el-radio-button>
32-
<el-radio-button label="90%"></el-radio-button>
33-
<el-radio-button label="80%"></el-radio-button>
34-
<el-radio-button label="70%"></el-radio-button>
35-
</el-radio-group>
36-
</el-form-item>
37-
<el-form-item label="内容区域圆角" v-if="pageData.config.theme.hasOwnProperty('borderRadius')">
38-
<el-switch v-model="pageData.config.theme.borderRadius"></el-switch>
39-
</el-form-item>
40-
<el-form-item label="内容区域位置（上 右 下 左 、空格隔开）" v-if="pageData.config.theme.hasOwnProperty('margin')">
41-
<el-input v-model="pageData.config.theme.margin"></el-input>
42-
</el-form-item>
43-
</el-collapse-item>
44-
</el-collapse>
4+
<el-form-item label="页面标题">
5+
<el-input v-model="pageData.title"></el-input>
6+
</el-form-item>
7+
<el-form-item label="页面背景色">
8+
<el-color-picker v-model="pageData.style.backgroundColor" />
9+
</el-form-item>
10+
<el-form-item label="页面背景图片">
11+
<ImgUpload :value.sync="pageData.style.backgroundImage" />
12+
</el-form-item>
13+
<el-form-item label="主题" v-if="themes.length>0">
14+
<el-radio-group v-model="pageData.theme" @change="setTheme">
15+
<el-radio-button v-for="item in themes" :label="item.value" :key="item.value">{{item.name}}</el-radio-button>
16+
</el-radio-group>
17+
</el-form-item>
18+
<el-form-item label="页面统计代码">
19+
<el-input type="textarea" :rows="4" placeholder="请输入统计代码" v-model="pageData.statsCode"></el-input>
20+
</el-form-item>
4521
</el-form>
4622
</div>
4723
</template>
@@ -52,27 +28,18 @@ import pageConfigData from '@/assets/js/page-config.js'
5228
export default {
5329
data() {
5430
return {
55-
activeName: 'base',
5631
themes: pageConfigData.themes,
5732
}
5833
},
5934
computed: {
60-
selectTheme: {
61-
get() {
62-
return this.$store.state.common.selectTheme
63-
},
64-
set(val) {
65-
this.$store.commit('setSelectTheme', val)
66-
}
67-
},
6835
...mapState({
6936
pageData: state => state.common.pageData
7037
})
7138
},
7239
methods: {
7340
setTheme(val) {
74-
this.pageData.config.theme = this.themes.find(item => val === item.value);
75-
this.pageData.config.backgroundColor = this.pageData.config.theme.backgroundColor;
41+
let i = this.themes.findIndex(item => item.value === val);
42+
this.$store.commit("setPageData", this.$util.deepClone(this.themes[i].pageData));
7643
}
7744
}
7845
}

‎src/components/widget-config/style-config.vue‎

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,63 @@
4040
<el-form-item label="边距（上 右 下 左 、空格隔开）" v-if="selectWg.style.hasOwnProperty('margin')">
4141
<el-input v-model="selectWg.style.margin"></el-input>
4242
</el-form-item>
43-
<el-form-item label="按钮背景色" v-if="selectWg.style.hasOwnProperty('btnStyle')">
44-
<el-color-picker v-model="selectWg.style.btnStyle.background" />
43+
44+
<el-form-item label="使用图片按钮" v-if="selectWg.style.hasOwnProperty('isImgBtn')">
45+
<el-switch v-model="selectWg.style.isImgBtn"></el-switch>
4546
</el-form-item>
47+
<el-form-item label="按钮样式：" v-if="selectWg.style.hasOwnProperty('btnStyle')">
48+
<el-form-item label="上传按钮图片" v-if="selectWg.style.isImgBtn">
49+
<ImgUpload :value.sync="selectWg.style.value" />
50+
</el-form-item>
51+
<div v-else>
52+
<el-form-item label="按钮背景色" v-if="selectWg.style.btnStyle.hasOwnProperty('background')">
53+
<el-color-picker v-model="selectWg.style.btnStyle.background" />
54+
</el-form-item>
55+
<el-form-item label="按钮文字色" v-if="selectWg.style.btnStyle.hasOwnProperty('color')">
56+
<el-color-picker v-model="selectWg.style.btnStyle.color" />
57+
</el-form-item>
58+
<el-form-item label="按钮边框色" v-if="selectWg.style.btnStyle.hasOwnProperty('borderColor')">
59+
<el-color-picker v-model="selectWg.style.btnStyle.borderColor" />
60+
</el-form-item>
61+
<el-form-item label="按钮圆角" v-if="selectWg.style.btnStyle.hasOwnProperty('borderradius')">
62+
<el-input-number
63+
v-model="selectWg.style.btnStyle.borderradius"
64+
:min="0"
65+
:max="30"
66+
:step="1"
67+
step-strictly
68+
size="small"
69+
@change="val=>selectWg.style.btnStyle.borderRadius = `${val}px`"
70+
/>
71+
</el-form-item>
72+
</div>
73+
</el-form-item>
74+
<el-form-item label="表单边框大小" v-if="selectWg.style.hasOwnProperty('borderwidth')">
75+
<el-input-number
76+
v-model="selectWg.style.borderwidth"
77+
:min="0"
78+
:max="15"
79+
:step="1"
80+
step-strictly
81+
size="small"
82+
@change="val=>selectWg.style.borderWidth = `${val}px`"
83+
/>
84+
</el-form-item>
85+
<el-form-item label="表单边框颜色" v-if="selectWg.style.hasOwnProperty('borderColor')&&selectWg.style.borderwidth>0">
86+
<el-color-picker v-model="selectWg.style.borderColor" />
87+
</el-form-item>
88+
<el-form-item label="表单区域圆角" v-if="selectWg.style.hasOwnProperty('borderradius')">
89+
<el-input-number
90+
v-model="selectWg.style.borderradius"
91+
:min="0"
92+
:max="30"
93+
:step="1"
94+
step-strictly
95+
size="small"
96+
@change="val=>selectWg.style.borderRadius = `${val}px`"
97+
/>
98+
</el-form-item>
99+
46100
<el-form-item label="每项宽度" v-if="selectWg.hasOwnProperty('itemWidth')">
47101
<el-input-number v-model="selectWg.itemWidth" :min="10" size="small" />
48102
</el-form-item>

0 commit comments

Comments
 (0)