欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuejs通過拖動(dòng)改變?cè)貙挾葘?shí)現(xiàn)自適應(yīng)

 更新時(shí)間:2020年09月02日 16:17:23   作者:vickylinj  
這篇文章主要介紹了Vuejs通過拖動(dòng)改變?cè)貙挾葘?shí)現(xiàn)自適應(yīng),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

需求:

原理:

拖動(dòng)效果的實(shí)現(xiàn)基本都是dom操作來實(shí)現(xiàn)的,通過拖動(dòng)分隔線,計(jì)算分隔線與瀏覽器邊框的距離(left),來實(shí)現(xiàn)拖動(dòng)之后的不同寬度的計(jì)算;當(dāng)拖動(dòng)分隔線1時(shí),計(jì)算元素框left和mid;當(dāng)拖動(dòng)分隔線2時(shí),計(jì)算元素框mid和right;同時(shí)設(shè)置元素框最小值以防止元素框拖沒了(其實(shí)是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函數(shù)功能指定窗口里設(shè)置鼠標(biāo)捕獲。

html部分代碼:

<template>
<div>
 <ul class="box" ref="box">
  <li class="left" ref="left">西瓜</li>
  <li class="resize" ref="resize"></li>
  <li class="mid" ref="mid">備注2</li>
  <li class="resize2" ref="resize2"></li>
   <li class="right" ref="right">test</li>
 </ul>
 <ul class="box" ref="box">
  <li class="left" ref="left">芒果</li>
  <li class="resize" ref="resize"></li>
  <li class="mid" ref="mid">備注</li>
  <li class="resize2" ref="resize2"></li>
  <li class="right" ref="right">test</li>
 </ul>
</div>
</template>

js部分代碼:

<script>
export default {
 mounted () {
  this.dragControllerDiv();
 },
 methods: {
  dragControllerDiv: function () {
   var resize = document.getElementsByClassName('resize');
   var resize2 = document.getElementsByClassName('resize2');
   var left = document.getElementsByClassName('left');
   var right = document.getElementsByClassName('right');
   var mid = document.getElementsByClassName('mid');
   var box = document.getElementsByClassName('box');
   for (let i = 0; i < resize.length; i++) {
    resize[i].onmousedown = function (e) {
     var startX = e.clientX;
     resize[i].left = resize[i].offsetLeft;
     document.onmousemove = function (e) {
      var endX = e.clientX;
      var rightW = right[i].offsetWidth;
      var moveLen = resize[i].left + (endX - startX);
      var maxT = box[i].clientWidth - resize[i].offsetWidth;
      if (moveLen < 150) moveLen = 150; 
      if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;

      resize[i].style.left = moveLen;

      for (let j = 0; j < left.length; j++) {
       left[j].style.width = moveLen + 'px';
       mid[j].style.width = (box[i].clientWidth - moveLen - rightW - 10) + 'px';
      }
     }
     document.onmouseup = function (evt) {
      document.onmousemove = null;
      document.onmouseup = null; 
      resize[i].releaseCapture && resize[i].releaseCapture();
     }
     resize[i].setCapture && resize[i].setCapture();
     return false;
    }
   }
   for (let i = 0; i < resize2.length; i++) {
    resize2[i].onmousedown = function (e) {
     var startX = e.clientX;
     resize2[i].left = resize2[i].offsetLeft;
     document.onmousemove = function (e) {
      var endX = e.clientX;
      var leftW = left[i].offsetWidth;
      var moveLen = resize2[i].left + (endX - startX) - leftW;
      var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5;
      if (moveLen < 150) moveLen = 150; 
      if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;

      resize2[i].style.left = moveLen;
      for (let j = 0; j < right.length; j++) {
       mid[j].style.width = moveLen + 'px';
       right[j].style.width = (box[i].clientWidth - moveLen - leftW - 10) + 'px';
      }
     }
     document.onmouseup = function (evt) {
      document.onmousemove = null;
      document.onmouseup = null; 
      resize2[i].releaseCapture && resize2[i].releaseCapture();
     }
     resize2[i].setCapture && resize2[i].setCapture();
     return false;
    }
   }
  }
 }
}
</script>

style部分:

<style scoped>
ul,li{
 list-style: none;
 display: block;
 margin:0;
 padding:0;
}
.box{
 width:800px;
 height:32px;
 overflow:hidden;
}
.left{
 width:calc(30% - 10px);
 height:100%; 
 background:skyblue;
 float:left;
}

.resize{
 width:5px;
 height:100%;
 cursor: w-resize;
 float:left;
}

.resize2{
 width:5px;
 height:100%;
 cursor: w-resize;
 float:left;
}

.right{
 float:left;
 width:35%;
 height:100%; 
 background:tomato;
}
.mid{
 float:left;
 width:35%;
 height:100%; 
 background:#f00;
}
</style>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • ES6學(xué)習(xí)之變量的兩種命名方法示例

    ES6學(xué)習(xí)之變量的兩種命名方法示例

    最近在學(xué)習(xí)ES,所以想著將自己學(xué)習(xí)的一些經(jīng)驗(yàn)技巧總結(jié)一下,方便學(xué)習(xí),所以下面這篇文章主要跟大家分享介紹了關(guān)于ES6學(xué)習(xí)之變量的兩種命名方法,文中通過示例代碼介紹的很詳細(xì),需要的朋友們下面來一起看看吧。
    2017-07-07
  • 設(shè)置和讀取cookie的javascript代碼

    設(shè)置和讀取cookie的javascript代碼

    設(shè)置和讀取cookie的javascript代碼...
    2007-07-07
  • javascript 三種數(shù)組復(fù)制方法的性能對(duì)比

    javascript 三種數(shù)組復(fù)制方法的性能對(duì)比

    javascript 三種數(shù)組復(fù)制方法的性能對(duì)比,對(duì)于webkit, 使用concat; 其他瀏覽器, 使用slice.
    2010-01-01
  • javascript實(shí)現(xiàn)checkBox的全選,反選與賦值

    javascript實(shí)現(xiàn)checkBox的全選,反選與賦值

    這篇文章主要介紹了javascript實(shí)現(xiàn)checkBox的全選,反選與賦值的方法,以實(shí)例形式詳細(xì)分析了實(shí)現(xiàn)的思路及對(duì)應(yīng)的html與js代碼的實(shí)現(xiàn)過程
    2015-03-03
  • js獲取圖片的base64編碼并壓縮

    js獲取圖片的base64編碼并壓縮

    這篇文章主要介紹了js獲取圖片的base64編碼并壓縮,幫助大家更好的理解和使用js,感興趣的朋友可以了解下
    2020-12-12
  • 詳談js模塊化規(guī)范

    詳談js模塊化規(guī)范

    下面小編就為大家?guī)硪黄斦刯s模塊化規(guī)范。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • JS截取數(shù)組操作簡(jiǎn)單示例

    JS截取數(shù)組操作簡(jiǎn)單示例

    這篇文章主要給大家介紹了關(guān)于JS截取數(shù)組操作的相關(guān)資料,對(duì)數(shù)組的操作相信大家都不陌生,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-08-08
  • JS利用map整合雙數(shù)組的小技巧分享

    JS利用map整合雙數(shù)組的小技巧分享

    Map是一組鍵值對(duì)的結(jié)構(gòu),具有極快的查找速度,下面這篇文章主要給大家介紹了關(guān)于JS利用map整合雙數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-08-08
  • 滾動(dòng)條代碼生成器

    滾動(dòng)條代碼生成器

    滾動(dòng)條代碼生成器...
    2007-02-02
  • 分離式j(luò)avascript取當(dāng)前element值的代碼

    分離式j(luò)avascript取當(dāng)前element值的代碼

    比較不錯(cuò)的分離式j(luò)s代碼,獲取element的值,大家注意下,運(yùn)行后的效果是32之類的值,其實(shí)主要是沒有強(qiáng)制轉(zhuǎn)換成數(shù)字,所以大家可以加上
    2008-05-05

最新評(píng)論