Skip to content

Commit 970d82d

Browse files
vincentzycvincentzyc
committed
更新vuedraggable
1 parent 2915e98 commit 970d82d

File tree

4 files changed

+56
-61
lines changed

4 files changed

+56
-61
lines changed

‎package.json

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
{
2-
"name": "form-design",
3-
"version": "0.1.0",
4-
"private": true,
5-
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
9-
},
10-
"dependencies": {
11-
"vue": "^2.5.17",
12-
"vue-router": "^3.0.1",
13-
"element-ui": "^2.4.5",
14-
"vuedraggable": "^2.17.0",
15-
"vuex": "^3.0.1",
16-
"crypto-js": "^3.1.9-1"
17-
},
18-
"devDependencies": {
19-
"@vue/cli-plugin-babel": "^3.2.0",
20-
"@vue/cli-plugin-eslint": "^3.2.0",
21-
"@vue/cli-service": "^3.2.0",
22-
"babel-eslint": "^10.0.1",
23-
"babel-plugin-component": "^1.1.1",
24-
"eslint": "^5.8.0",
25-
"eslint-plugin-vue": "^5.0.0-0",
26-
"stylus": "^0.54.5",
27-
"stylus-loader": "^3.0.2",
28-
"vue-cli-plugin-element": "^1.0.0",
29-
"vue-template-compiler": "^2.5.17"
30-
}
31-
}
2+
"name": "form-design",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"crypto-js": "^3.1.9-1",
12+
"element-ui": "^2.4.5",
13+
"vue": "^2.5.17",
14+
"vue-router": "^3.0.1",
15+
"vuedraggable": "^2.23.0",
16+
"vuex": "^3.0.1"
17+
},
18+
"devDependencies": {
19+
"@vue/cli-plugin-babel": "^3.2.0",
20+
"@vue/cli-plugin-eslint": "^3.2.0",
21+
"@vue/cli-service": "^3.2.0",
22+
"babel-eslint": "^10.0.1",
23+
"babel-plugin-component": "^1.1.1",
24+
"eslint": "^5.8.0",
25+
"eslint-plugin-vue": "^5.0.0-0",
26+
"stylus": "^0.54.5",
27+
"stylus-loader": "^3.0.2",
28+
"vue-cli-plugin-element": "^1.0.0",
29+
"vue-template-compiler": "^2.5.17"
30+
}
31+
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
</el-select>
3333
</el-form-item>
3434
<el-form-item label="选项" v-if="selectWg.hasOwnProperty('options')">
35-
<draggable element="ul" :list="selectWg.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.move-icon'}">
35+
<draggable tag="ul" :list="selectWg.options" :group="{ name:'options'}" ghostClass="ghost" handle=".move-icon">
3636
<li v-for="(item, index) in selectWg.options" :key="index">
3737
<div class="flex align-middle">
3838
<el-input size="mini" v-model="selectWg.options[index]"></el-input>
@@ -46,15 +46,15 @@
4646
</div>
4747
</el-form-item>
4848
<el-form-item label="图片上传" v-if="selectWg.type === 'imgShow'">
49-
<ImgUpload :value.sync="selectWg.value"/>
49+
<ImgUpload :value.sync="selectWg.value" />
5050
</el-form-item>
5151
<template v-if="selectWg.type ==='imgSlide'">
5252
<el-form-item label="轮播图片设置">
53-
<draggable element="ul" :list="selectWg.value" :options="{group:{ name:'slideList'}, ghostClass: 'ghost',handle: '.move-icon'}">
53+
<draggable tag="ul" :list="selectWg.value" :group="{ name:'slideList'}" ghostClass="ghost" handle=".move-icon">
5454
<li v-for="(item, index) in selectWg.value" :key="index" style="border:1px dashed #999">
5555
<div class="pd10">
5656
<div class="relative flex flex-center">
57-
<ImgUpload :value.sync="item.image"/>
57+
<ImgUpload :value.sync="item.image" />
5858
<div class="absolute-top-right">
5959
<i class="el-icon-menu move-icon"></i>
6060
<i class="el-icon-delete delect-icon" @click="handleSlideRemove(index)"></i>
@@ -76,7 +76,7 @@
7676
</div>
7777
</el-form-item>
7878
<el-form-item label="图片高度(px)">
79-
<el-input-number v-model="selectWg.style.height" :min="100" :max="300" size="small"/>
79+
<el-input-number v-model="selectWg.style.height" :min="100" :max="300" size="small" />
8080
</el-form-item>
8181
<el-form-item>
8282
<span slot="label">
@@ -85,7 +85,7 @@
8585
<i class="el-icon-info fs12 mg-l10"></i>
8686
</el-tooltip>
8787
</span>
88-
<el-input-number v-model="selectWg.interval" :min="1000" :max="10000" size="small"/>
88+
<el-input-number v-model="selectWg.interval" :min="1000" :max="10000" size="small" />
8989
</el-form-item>
9090
</template>
9191
</section>

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,51 @@
11
<template>
22
<draggable
33
v-model="pageData[list]"
4-
:options="{group:'widget', ghostClass: 'ghost',swapThreshold:0.5,animation: 100}"
4+
:group="{name:'widget'}"
5+
ghostClass="ghost"
6+
:swapThreshold="0.5"
7+
:animation="100"
58
@add="handleWidgetAdd"
69
class="widget-form-list"
710
:class="{'widget-empty': pageData[list].length === 0}"
811
>
912
<template v-for="(item, index) in pageData[list]">
1013
<div class="widget-view" :key="item.key" :class="{active: selectWg.key === item.key}" @click="handleSelectWidget(index)">
1114
<!-- 手机 -->
12-
<WgPhone :item="item"/>
15+
<WgPhone :item="item" />
1316

1417
<!-- 输入框 -->
15-
<WgInput :item="item"/>
18+
<WgInput :item="item" />
1619

1720
<!-- 选择框 -->
18-
<WgCheckbox :item="item"/>
21+
<WgCheckbox :item="item" />
1922

2023
<!-- 下拉选择 -->
21-
<WgSelect :item="item"/>
24+
<WgSelect :item="item" />
2225

2326
<!-- 开关 -->
24-
<WgSwitch :item="item"/>
27+
<WgSwitch :item="item" />
2528

2629
<!-- 日期选择 -->
27-
<WgDate :item="item"/>
30+
<WgDate :item="item" />
2831

2932
<!-- 图片展示 -->
30-
<WgImgshow :item="item"/>
33+
<WgImgshow :item="item" />
3134

3235
<!-- 图片轮播 -->
33-
<WgImgslide :item="item"/>
36+
<WgImgslide :item="item" />
3437

3538
<!-- 按钮 -->
36-
<WgButton :item="item"/>
39+
<WgButton :item="item" />
3740

3841
<!-- 文本描述 -->
39-
<WgStaticText :item="item"/>
42+
<WgStaticText :item="item" />
4043

4144
<!-- 分割线 -->
42-
<WgSplitLine :item="item"/>
45+
<WgSplitLine :item="item" />
4346

4447
<!-- 横向滑动自动选择 -->
45-
<WgHpicker :item="item"/>
48+
<WgHpicker :item="item" />
4649

4750
<el-button
4851
title="删除"

‎src/views/home.vue

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,24 @@
11
<template>
22
<div class="home">
3-
<Header/>
3+
<Header />
44
<el-container>
55
<div class="form-edit-wrapper flex">
66
<el-aside style="min-width:300px;width:20vw">
77
<div class="components-list">
88
<div class="widget-cate">基础类组件</div>
9-
<draggable
10-
element="ul"
11-
:list="basicComponents"
12-
:options="{group:{ name:'widget', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
13-
>
9+
<draggable tag="ul" :list="basicComponents" :group="{ name:'widget', pull:'clone',put:false}" :sort="false" ghostClass="ghost">
1410
<li class="form-edit-widget-label" v-for="(item, index) in basicComponents" :key="index">
1511
<a>{{item.name}}</a>
1612
</li>
1713
</draggable>
1814
<div class="widget-cate">图片类组件</div>
19-
<draggable element="ul" :list="imgComponents" :options="{group:{ name:'widget', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}">
15+
<draggable tag="ul" :list="imgComponents" :group="{ name:'widget', pull:'clone',put:false}" :sort="false" ghostClass="ghost">
2016
<li class="form-edit-widget-label" v-for="(item, index) in imgComponents" :key="index">
2117
<a>{{item.name}}</a>
2218
</li>
2319
</draggable>
2420
<div class="widget-cate">辅助类组件</div>
25-
<draggable
26-
element="ul"
27-
:list="assistComponents"
28-
:options="{group:{ name:'widget', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
29-
>
21+
<draggable tag="ul" :list="assistComponents" :group="{ name:'widget', pull:'clone',put:false}" :sort="false" ghostClass="ghost">
3022
<li class="form-edit-widget-label" v-for="(item, index) in assistComponents" :key="index">
3123
<a>{{item.name}}</a>
3224
</li>

0 commit comments

Comments
 (0)