Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
8d71fcc5 by simon
Options

[fixbug] 移动端保费计算组件不能拖动 

[fixbug] 保费计算组件resize后不重新计算位置
首页三语修复
1 parent b6785196
Inline Side-by-side
Showing 5 changed files with 88 additions and 26 deletions
...@@ -105,6 +105,10 @@ html { ...@@ -105,6 +105,10 @@ html {
105 box-sizing: border-box; 105 box-sizing: border-box;
106 } 106 }
107 107
108 * {
109 touch-action: pan-y;
110 }
111
108 body { 112 body {
109 font-size: $fontSize; 113 font-size: $fontSize;
110 } 114 }
...@@ -438,8 +442,6 @@ textarea { ...@@ -438,8 +442,6 @@ textarea {
438 } 442 }
439 } 443 }
440 444
441
442
443 .ql-editor { 445 .ql-editor {
444 padding: 0px 0px !important; 446 padding: 0px 0px !important;
445 } 447 }
......
...@@ -4,48 +4,108 @@ export default { ...@@ -4,48 +4,108 @@ export default {
4 return { 4 return {
5 slider: null, //滚动条DOM元素 5 slider: null, //滚动条DOM元素
6 thunk: null, //拖拽DOM元素 6 thunk: null, //拖拽DOM元素
7 per: this.value || 0 //当前值 7 per: this.value || 0, //当前值
8
9 flags: false,
10 curWidth: 0,
11 disX: 0
8 }; 12 };
9 }, 13 },
10 methods: { 14 methods: {
11 initData() { 15 end(e) {
12 var _this = this; 16 this.flags = false;
13 this.$nextTick(() => { 17 },
14 _this.slider = _this.$refs.slider; 18 down(event) {
15 _this.thunk = _this.$refs.trunk; 19 let _this = this;
16 if (_this.thunk) { 20 var touch;
17 _this.thunk.onmousedown = function (e) { 21 if (event.touches) {
18 var width = parseInt(_this.width); 22 touch = event.touches[0];
19 var disX = e.clientX; 23 } else {
20 document.onmousemove = function (e) { 24 touch = event;
21 // value, left, width 25 }
22 // 当value变化的时候，会通过计算属性修改left，width 26 let e = touch;
27
28 _this.curWidth = parseInt(_this.width);
29 _this.disX = e.clientX;
30 _this.flags = true;
31 },
32 move(event) {
33 let _this = this;
34 if (_this.flags) {
35 var touch;
36 if (event.touches) {
37 touch = event.touches[0];
38 } else {
39 touch = event;
40 }
41 let e = touch;
42
43 let disX = _this.disX;
44 let width = _this.curWidth;
23 45
24 // 拖拽的时候获取的新width 46 // 拖拽的时候获取的新width
25 var newWidth = e.clientX - disX + width; 47 var newWidth = e.clientX - disX + width;
48 // console.log("this.slider.offsetWidth:", this.slider.offsetWidth);
49 // console.log("this.thunk.offsetWidth:", this.thunk.offsetWidth);
50
26 // 拖拽的时候得到新的百分比 51 // 拖拽的时候得到新的百分比
27 var scale = newWidth / _this.slider.offsetWidth; 52 var scale = newWidth / _this.slider.offsetWidth;
28 _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min); 53 _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
29 _this.per = Math.max(_this.per, _this.min); 54 _this.per = Math.max(_this.per, _this.min);
30 _this.per = Math.min(_this.per, _this.max); 55 _this.per = Math.min(_this.per, _this.max);
31 _this.$emit("input", _this.per); 56 _this.$emit("input", _this.per);
32 };
33 document.onmouseup = function () {
34 document.onmousemove = document.onmouseup = null;
35 };
36 return false;
37 };
38 } 57 }
39 });
40 58
59 },
60 initData() {
61 var _this = this;
62 this.$nextTick(() => {
63
64 // 监听PC和移动端事件
65 this.thunk.addEventListener("mousedown", (e) => {
66 event.preventDefault();
67 _this.down(e);
68 }, false);
69 this.thunk.addEventListener("touchstart", (e) => {
70 event.preventDefault();
71 _this.down(e);
72 }, false);
73
74 document.addEventListener("mousemove", (e) => {
75 event.preventDefault();
76 _this.move(e);
77 }, false);
78
79 document.addEventListener("touchmove", (e) => {
80 event.preventDefault();
81 _this.move(e);
82 }, false);
83
84 document.addEventListener("mouseup", (e) => {
85 event.preventDefault();
86 _this.end(e);
87 }, false);
41 88
89 document.addEventListener("touchend", (e) => {
90 event.preventDefault();
91 _this.end(e);
92 }, false);
93 });
42 } 94 }
43 }, 95 },
44 //渲染到页面的时候 96 //渲染到页面的时候
45 mounted() { 97 mounted() {
98 this.slider = this.$refs.slider;
99 this.thunk = this.$refs.trunk;
46 this.initData(); 100 this.initData();
47 window.addEventListener('resize', () => { 101 window.addEventListener('resize', () => {
48 this.initData(); 102 this.initData();
103 // console.log("scale:", this.scale);
104
105 // 改per的值，强制刷新计算属性computed
106 let tempPer = this.per;
107 this.per = 0;
108 this.per = tempPer;
49 }, false); 109 }, false);
50 }, 110 },
51 111
......
1 <template> 1 <template>
2 <div class="slider" ref="slider"> 2 <div class="slider" ref="slider">
3 <div class="process" :style="{width}"></div> 3 <div class="process" :style="{width}"></div>
4 <div class="thunk" ref="trunk" :style="{left}"> 4 <div class="thunk" ref="trunk" :style="{left}" >
5 <div class="tips"> 5 <div class="tips">
6 <span>{{per}}</span> 6 <span>{{per}}</span>
7 <!-- <span>300</span> --> 7 <!-- <span>300</span> -->
......
...@@ -534,7 +534,7 @@ export default { ...@@ -534,7 +534,7 @@ export default {
534 element.index = idx; 534 element.index = idx;
535 element.describeList = element.describe.split("\n"); 535 element.describeList = element.describe.split("\n");
536 }); 536 });
537 this.curTab = this.dataList[0]; 537 this.curTab = this.dataList[0] || {};
538 this.bannerList = this.dataList; 538 this.bannerList = this.dataList;
539 this.bannerList.forEach(element => { 539 this.bannerList.forEach(element => {
540 element.btns = element.btnDescribe; 540 element.btns = element.btnDescribe;
......
...@@ -270,11 +270,11 @@ ...@@ -270,11 +270,11 @@
270 <div class="line"></div> 270 <div class="line"></div>
271 <!-- 计算 --> 271 <!-- 计算 -->
272 <div class="calculation"> 272 <div class="calculation">
273 <div class="label">{{$t('index.quote.vhis.quotePerMonth')}}</div> 273 <div class="label">{{$t('index.quote.genRich.quotePerMonth')}}</div>
274 <div class="value">$ <span class="price">{{sumAssured}}</span></div> 274 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
275 </div> 275 </div>
276 <!-- 提示 --> 276 <!-- 提示 -->
277 <div class="tips">{{$t('index.quote.vhis.tips')}}</div> 277 <div class="tips">{{$t('index.quote.genRich.tips')}}</div>
278 </div> 278 </div>
279 </div> 279 </div>
280 280
......