您的位置：首页 > 产品设计 > UI/UE

一次基于Vue.Js的用户体验优化（vue drag）

2017-05-21 18:56 465 查看

一.写在前面

半年以前，第一次在项目上实践VueJs,由于在那之前，没有Angular,avalon等框架的实践经验，所以在Vue的使用上，没有给自己总结出更多的经验和体验。随着项目进行和优化改版，无论是新代码的增加还是旧代码，在功能的实现和代码的书写上，Vue逐渐替代了Jquery，除了有些不容易替换和没有找到基于vue更合适的组件。Vue的使用，在我个人的感受中减轻了我操作dom的负担，我不需要从dom中获取数据，然后拼装数据，也不需要向dom中回写展示数据。更不需要我各种拼接html，即使简单的html可以忍受，复杂的也将导致无法维护。组件化的开发，更能让我们js分割，职责清晰，比模块化开发的复用性更强，最后再通过工具打包。

二.本次优化内容：第一版的体验

先上第一版体验的gif图吧，说实话，当时强行做出来之后，我自己都不爱用，更不想看自己的代码和修改拼接一堆的html。截图中所体现的功能，实际上只是将教案的详细安排和每一个课时对应匹配起来。当课时数量比较多的时候，那么有多少个课时，用户可能就需要点击多少下复选框。当时，只用了vue computed来计算红色部分的文字应该如何显示，所以也能一并监控到教学方案和课时数量的改变情况数据，当教学方案和课时都已经选择的时候，会生成下方的操作内容，内容则是html拼接的。

1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5     <meta charset="utf-8">
6     <title></title>
7     <meta name="keywords" content="" />
8     <meta name="description" content="" />
9
10     <style>
11         .select-item {
12             background-color: #5bc0de;
13             display: inline-block;
14             text-align: center;
15             border-radius: 3px;
16             margin-right: 10px;
17             cursor: pointer;
18             padding: 6px 20px;
19             color: #fff;
20         }
21
22         .cursored {
23             cursor: default;
24         }
25
26         .project-content, .people-content {
27             margin: 30px 50px;
28         }
29
30         .people-content {
31             margin-top: 30px;
32         }
33
34         .drag-div {
35             border: 1px solid#5bc0de;
36             padding: 10px;
37             margin-bottom: 10px;
38             width: 800px;
39             cursor: pointer;
40         }
41
42         .select-project-item {
43             display: inline-block;
44             text-align: center;
45             border-radius: 3px;
46         }
47
48         .drag-people-label {
49             margin-bottom: 0;
50             padding-right: 10px;
51         }
52
53         [v-cloak] {
54             display: none;
55         }
56     </style>
57 </head>
58 <body>
59
60     <div class='drag-content' id="dragCon">
61         <div class='project-content'>
62             <div class='select-item' draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas">{{pjdt.name}}</div>
63         </div>
64         <div class='people-content'>
65             <div class='drag-div' v-for="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)'>
66                 <div class='select-project-item'>
67                     <label class='drag-people-label'>{{ppdt.name}}:</label>
68                 </div>
69             </div>
70         </div>
71     </div>
72     <script src="../../../content/lib/vue/vue.min.js"></script>
73     <script type="text/javascript">
74         var dom;
75         var ss = new Vue({
76             'el': '#dragCon',
77             data: {
78                 projectdatas: [{
79                     id: 1,
80                     name: '葡萄'
81                 }, {
82                     id: 2,
83                     name: '芒果'
84                 }, {
85                     id: 3,
86                     name: '木瓜'
87                 }, {
88                     id: 4,
89                     name: '榴莲'
90                 }],
91
92
93                 peopledata: [{
94                     id: 1,
95                     name: '小颖'
96                 }, {
97                     id: 2,
98                     name: 'hover'
99                 }, {
100                     id: 3,
101                     name: '空巢青年三 '
102                 }, {
103                     id: 3,
104                     name: '一丢丢'
105                 }]
106
107             },
108             mounted: function () {
109                 this.$nextTick(function () {
110
111                 })
112             },
113             watch: {
114                 projectdatas: {
115                     handler: function (val, oldval) {
116
117                     },
118                     deep: true
119                 },
120                 peopledata: {
121                     handler: function (val, oldval) {
122
123                     },
124                     deep: true
125                 }
126             },
127
128             methods: {
129                 drag: function (event) {
130                     dom = event.currentTarget
131                 },
132                 drop: function (event) {
133                     event.preventDefault();
134                     event.target.appendChild(dom);
135                 },
136                 allowDrop: function (event) {
137                     event.preventDefault();
138                 }
139             }
140
141         });
142
143
144     </script>
145 </body>
146 </html>

View Code

写在最后

如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下加【推荐】按钮。

如果，您希望更容易地发现我的新博客，不妨点击下方红色【关注】的。

因为，我的分享热情也离不开您的肯定支持。

感谢您的阅读，我将持续输出分享，我是蜗牛, 保持学习，谨记谦虚。不端不装，有趣有梦。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

一次基于Vue.Js的用户体验优化 （vue drag）

一.写在前面

二.本次优化内容：第一版的体验

写在最后

一次基于Vue.Js的用户体验优化（vue drag）