Skip to content

Commit 08158b0

Browse files
vincentzycvincentzyc
committed
init
1 parent f23cb11 commit 08158b0

5 files changed

Lines changed: 42 additions & 11 deletions

File tree

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default {
1111
name: "app"
1212
};
1313
</script>
14-
<style lang="scss" scoped>
14+
<style lang="scss">
1515
@import "./assets/css/main.scss";
1616
</style>
1717

‎src/assets/css/main.scss‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.page-container {
22
height: 100%;
33
width: 100%;
4-
.ghost {
4+
.widget-form-label.ghost {
55
position: relative;
6-
margin: 0;
6+
margin: 10px 0;
77
width: 100%;
88
background: #fff;
99
border: 1px dashed #409eff;
@@ -18,12 +18,32 @@
1818
right: 0;
1919
bottom: 0;
2020
}
21+
.design-form-item {
22+
padding: 15px 10px;
23+
margin: 10px 0;
24+
position: relative;
25+
border-left: 5px solid transparent;
26+
cursor: move;
27+
}
28+
.design-form-item.active {
29+
border-left: 5px solid #409eff;
30+
background: #b3d8ff;
31+
}
32+
.design-form-item::after {
33+
content: "";
34+
display: block;
35+
position: absolute;
36+
left: 0;
37+
right: 0;
38+
bottom: 0;
39+
top: 0;
40+
z-index: 1001;
41+
}
2142
.input-text, .input-select {
2243
width: 100%;
23-
padding: 15px 0;
44+
padding: 10px 0;
2445
color: #666;
2546
font-size: 14px;
26-
margin-bottom: 20px;
2747
border-radius: 4px;
2848
border: 1px solid #ddd;
2949
text-indent: 10px;

‎src/assets/json/widget-form.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@
1515
"required": false,
1616
"placeholder": "",
1717
"options": [{
18+
"text": "选项1",
1819
"value": "选项1"
1920
}, {
21+
"text": "选项2",
2022
"value": "选项2"
2123
}, {
24+
"text": "选项3",
2225
"value": "选项3"
2326
}]
2427
}

‎src/components/design-form.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,17 @@
22
<draggable class="page-container" v-model="pageItems" :options="{group:'people', ghostClass: 'ghost'}" @end="handleMoveEnd" @add="handleWidgetAdd">
33
<template v-for="(widget, index) in pageItems">
44
<div class="design-form-label relative" :key="index">
5-
<template v-if="widget.type === 'input'">
6-
<input type="text" v-model="dataModel" :placeholder="widget.config.placeholder">
7-
</template>
5+
<div class="design-form-item" :class="{active: selectWidget === index}" @click="handleSelectWidget(index)">
6+
<template v-if="widget.type === 'input'">
7+
<input type="text" class="input-text" :placeholder="widget.config.placeholder">
8+
</template>
9+
<template v-if="widget.type === 'select'">
10+
<select class="input-select" placeholder="widget.config.placeholder">
11+
<!-- <option value disabled selected hidden>孩子就读年级</option> -->
12+
<option :value="item.value" v-for="item in widget.config.options" :key="item.value">{{item.text}}</option>
13+
</select>
14+
</template>
15+
</div>
816
</div>
917
</template>
1018
</draggable>
@@ -21,7 +29,7 @@ export default {
2129
data() {
2230
return {
2331
pageItems: [],
24-
selectWidget: this.select
32+
selectWidget: ""
2533
}
2634
},
2735
methods: {
@@ -30,7 +38,7 @@ export default {
3038
},
3139
handleSelectWidget(index) {
3240
console.log(index, '#####')
33-
this.selectWidget = this.data.list[index]
41+
this.selectWidget = index
3442
},
3543
handleWidgetAdd(evt) {
3644
console.log('add', evt)

‎src/components/widget-form.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default {
4242
</script>
4343

4444
<style scoped>
45-
.widget-form-container {
45+
.widget-form-container{
4646
padding: 10px;
4747
overflow: hidden;
4848
}

0 commit comments

Comments
 (0)