我有个不好的脑子,自己做过的功能,过个两个月我就忘记了,疫情期间的面试也让我受打击,嗨,没事了,把自己弄的案例总结一下,不装逼,直接贴代码
1 <div class="palette"> 2 <div class="paletteIn wow bounceIn"> 3 <h2 class="paletteIn_title">{{tuozhuaiDesc.title}}</h2> 4 <p class="paletteIn_p">{{tuozhuaiDesc.desc}}</p> 5 <div class="warpp"> 6 <div id="box" ref="box"> 7 <div id="left" ref="left" :style="{'background-image': 'url('+ tuozhuaiDesc.anImg +')'}"></div> 8 <div id="resize" ref="resize"> 9 <div class="resize_icon"> 10 </div> 11 </div> 12 <img :src="tuozhuaiDesc.liangImg" class="right_abc" style="width:1200px;height:666px" /> 13 </div> 14 </div> 15 <div class="palette_b_t"> 16 <p>{{tuozhuaiDesc.anDesc}}</p> 17 <p>{{tuozhuaiDesc.liangDesc}}</p> 18 </div> 19 </div> 20 </div>
1 mounted() { 2 this.dragControllerDiv(); 3 }, 4 methods: { 5 dragControllerDiv: function() { 6 var box = document.getElementById("box"); 7 var left = document.getElementById("left"); 8 // var right = document.getElementById("right"); 9 var resize = document.getElementById("resize"); 10 11 resize.onmousedown = function(e) { 12 var startX = e.clientX; 13 resize.left = resize.offsetLeft; 14 15 document.onmousemove = function(e) { 16 var endX = e.clientX; 17 18 var moveLen = resize.left + (endX - startX); 19 20 var maxT = box.clientWidth - resize.offsetWidth; 21 22 if (moveLen < 30) moveLen = 30; 23 if (moveLen > maxT - 30) moveLen = maxT - 30; 24 25 resize.style.left = moveLen; 26 left.style.width = moveLen + "px"; 27 // right.style.width = box.clientWidth - moveLen - 5 + "px"; 28 }; 29 30 document.onmouseup = function(evt) { 31 document.onmousemove = null; 32 document.onmouseup = null; 33 resize.releaseCapture && resize.releaseCapture(); 34 }; 35 resize.setCapture && resize.setCapture(); 36 return false; 37 }; 38 } 39 }