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

vue3 可拖動(dòng)的左右面板分割組件實(shí)現(xiàn)

 更新時(shí)間:2021年06月02日 09:43:25   作者:我不愛吃魚啦  
最近在使用vue的時(shí)候,遇到一個(gè)需求,實(shí)現(xiàn)左右div可通過中間部分拖拽調(diào)整寬度,本文就整理一下,分享給大家,有興趣的可以學(xué)習(xí)

最近在使用vue的時(shí)候,遇到一個(gè)需求,實(shí)現(xiàn)左右div可通過中間部分拖拽調(diào)整寬度,本文就整理一下,分享給大家,具體如下:

效果圖

分解組件

整體使用flex布局

左側(cè)面板

  • 面板的具體內(nèi)容通過slot具名插槽傳入。
  • title通過prop傳入
  • 可拖動(dòng),為了保證內(nèi)容樣式不會(huì)被拖動(dòng)所破壞,對(duì)面板的寬度設(shè)定最大值/最小值

右側(cè)面板

  • 右側(cè)面板寬度隨著左側(cè)面板的寬度變化而變化,此處需注意,內(nèi)容的寬度使用flex-auto自動(dòng)適應(yīng)。
  • 需要做移動(dòng)端的自適應(yīng)。
  • 自適應(yīng)使用tailwind的媒體查詢

入?yún)⒎纸?br />

props

  • @param {Number} maxWidth 最大寬度
  • @param {Number} minWidth 最小寬度
  • @param {String} leftTitle 左標(biāo)題
  • @param {String} rightTitle 右標(biāo)題?
  • @param {Boolean} sotoreage 是否存儲(chǔ)與localstorege

slots

  • left-content {Element}  左側(cè)內(nèi)容
  • right-content {Element} 右側(cè)內(nèi)容

具體實(shí)現(xiàn)

如何拖動(dòng)呢?

在左側(cè)面板與右側(cè)面板之間添加一個(gè)隱藏的盒子,我將這個(gè)盒子隱藏在box-shadow之中。具體事件放在這個(gè)div中實(shí)現(xiàn)

<div id="line" class="w-2 cursor-move hidden md4:block"onMousedown={hnadleMouseDown}>
</div>

事件監(jiān)聽

    const hnadleMouseDown = (evt: MouseEvent) => {
      /* 獲取起始點(diǎn)位,并存儲(chǔ) */
      let { pageX, pageY } = evt;
      basePosition.pageX = pageX;
      basePosition.pageY = pageY;
      /* 監(jiān)聽鼠標(biāo)的移動(dòng)事件 */
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    };
    const handleMouseMove = evt => {
      /* 阻止瀏覽器默認(rèn)事件,防止觸發(fā)瀏覽器的手勢(shì)功能 */
      evt.preventDefault();
      /* 設(shè)置定時(shí)器,防止dom多次回流 */
      clearTimeout(timer.value);
      timer.value = setTimeout(() => {
        let { pageX } = evt;
        const baseDiv = document.querySelector(".right-border-shadow");
        /* 處理寬度,是否處于最大值/最小值之間 */
        let baseWidth: Number | undefined =
          Number(baseDiv?.clientWidth) + (pageX - basePosition.pageX);
        baseWidth =
          baseWidth > Number(props?.maxWidth) ? props.maxWidth : baseWidth;
        baseWidth =
          Number(baseWidth) < Number(props?.minWidth)
            ? props.minWidth
            : baseWidth;
        baseDiv?.setAttribute("style", `width:${baseWidth}px`);
        /* emit寬度改變的事件 */
        ctx.emit("drugend");
        /* 存儲(chǔ)到store */
        setStore(baseWidth);
      }, 50);
    };
    const handleMouseUp = evt => {
      /* 結(jié)束拖動(dòng)之后,取消事件監(jiān)聽,并emit出最終寬度 */
      const width = document.querySelector(".right-border-shadow")?.clientWidth;
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
      ctx.emit("drugend", width);
    };

寬度處理

style={`width:${
            store.get("split-width")
              ? store.get("split-width")
              : props.minWidth
              ? props.minWidth
              : 384
          }px`}

優(yōu)化

手動(dòng)改變?yōu)g覽器視窗寬度

nextTick(() => {
        ctx.emit("load", ctx);
        MutationObserver = window.MutationObserver;
        if (MutationObserver) {
          /* 監(jiān)聽瀏覽器的窗口變化,在部分情況下需要這個(gè)api */
          mo = new MutationObserver(function() {
            const __wm = document.querySelector("#rezie-id");
            // 只在__wm元素變動(dòng)才重新調(diào)用 __canvasWM
            if (!__wm) {
              // 避免一直觸發(fā)
              mo.disconnect();
              mo = null;
              ctx.emit("resize");
            }
          });
          mo.observe(document.querySelector("#rezie-id"), {
            attributes: true,
            subtree: true,
            childList: true,
          });
        }
      });

未生效,求指點(diǎn)

bug

父組件的onMounted鉤子中獲取子元素的slot元素節(jié)點(diǎn)報(bào)錯(cuò),為null。目前的解決辦法是在子組件的onMounted鉤子中拋出一個(gè)load事件,父組件使用onLoad去處理接下來的邏輯。

git地址

倉(cāng)庫(kù)地址
預(yù)覽地址

到此這篇關(guān)于vue3 可拖動(dòng)的左右面板分割組件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3 可拖動(dòng)左右分割面板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家! 

相關(guān)文章

  • 如何通過shell腳本自動(dòng)生成vue文件詳解

    如何通過shell腳本自動(dòng)生成vue文件詳解

    這篇文章主要給大家介紹了關(guān)于如何通過shell腳本自動(dòng)生成vue文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • Vue 使用中的小技巧

    Vue 使用中的小技巧

    這篇文章主要介紹了Vue 使用中的小技巧,是小編日常開發(fā)的時(shí)候用到的小技巧,需要的朋友可以參考下
    2018-04-04
  • 使用vue.js在頁(yè)面內(nèi)組件監(jiān)聽scroll事件的方法

    使用vue.js在頁(yè)面內(nèi)組件監(jiān)聽scroll事件的方法

    今天小編就為大家分享一篇使用vue.js在頁(yè)面內(nèi)組件監(jiān)聽scroll事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue項(xiàng)目實(shí)現(xiàn)圖片懶加載的簡(jiǎn)單步驟

    vue項(xiàng)目實(shí)現(xiàn)圖片懶加載的簡(jiǎn)單步驟

    懶加載的好處在于減少服務(wù)器的壓力,在網(wǎng)絡(luò)比較慢的情況下,可以提前給這張圖片添加一個(gè)占位圖片,提高用戶的體驗(yàn),這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)圖片懶加載的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • 深入理解Vue transition源碼分析

    深入理解Vue transition源碼分析

    本篇文章主要介紹了深入理解Vue transition源碼分析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • Vue中sync修飾符分析原理及用法示例

    Vue中sync修飾符分析原理及用法示例

    在vue中,子組件如果想修改父組件的變量,一般做法是通過綁定事件的方法,父組件向子組件傳遞修改變量的方法,子組件觸發(fā)修改變量的方法執(zhí)行,這種方式中規(guī)中矩;另一種方法是使用sync修飾符,此方法可以減少很多代碼量
    2022-08-08
  • Vuex 模塊化使用詳解

    Vuex 模塊化使用詳解

    這篇文章主要介紹了Vuex 模塊化使用詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • vue實(shí)現(xiàn)全選功能

    vue實(shí)現(xiàn)全選功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 詳解vue.js下引入百度地圖jsApi的兩種方法

    詳解vue.js下引入百度地圖jsApi的兩種方法

    這篇文章主要介紹了詳解vue.js下引入百度地圖jsApi的兩種方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問題

    Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問題

    這篇文章主要介紹了Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評(píng)論