Heim Web-Frontend View.js So implementieren Sie ein ziehbares Menü in vue.js

So implementieren Sie ein ziehbares Menü in vue.js

Oct 12, 2021 pm 04:48 PM
vue.js 菜单

Vue.js-Methode zum Implementieren eines ziehbaren Menüs: [import „@/assets/second.css“; export default {name: „HelloWorld“, Direktiven: {move(el, bindings) {...].

So implementieren Sie ein ziehbares Menü in vue.js

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer.

Bevor wir den formalen Implementierungscode angeben, müssen wir zunächst einige relevante Wissenspunkte verstehen.

Wissenspunkt eins:

Benutzerdefinierte Anweisungsanweisung in vue

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 注册局部自定义指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
// 在此我们用的是局部
Nach dem Login kopieren

Wissenspunkt zwei: js

	onmousedown 			:鼠标按下事件
	clientX	    			:时鼠标指针相对于浏览器页面(或客户区)的水平坐标
    document.getElementById :通过id获取节点
    offsetWidth				:获取的是盒子最终的宽
    onmousemove				:鼠标移动事件 
    onmouseup				:鼠标释放事件
Nach dem Login kopieren

Rendering:

So implementieren Sie ein ziehbares Menü in vue.js

So implementieren Sie ein ziehbares Menü in vue.js

Seitencode:

	<template>
  <el-container>
    <el-main>
      <div class="myBox">
        <div id="silderLeft">
          <div class="menuList">侧栏菜单区</div>
          <div class="moveBtn" v-move></div>
        </div>
        <div class="silderRight">右边自适应大小,黄色的为拖拽的按钮</div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import "@/assets/second.css";
export default {
  name: "HelloWorld",
  directives: {
    move(el, bindings) {
      el.onmousedown = function(e) {
        var init = e.clientX;
        var parent = document.getElementById("silderLeft");
        var initWidth = parent.offsetWidth;
        document.onmousemove = function(e) {
          var end = e.clientX;
          var newWidth = end - init + initWidth;
          parent.style.width = newWidth + "px";
        };
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null;
        };
      };
    }
  },
  data() {
    return {
      msg: "我是第二页"
    };
  },
  methods: {},
  mounted() {},
  created() {},
  updated() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Nach dem Login kopieren

Stil Code:

.myBox{
    width: 100%;;
    height: 700px;
    border: 1px solid red;
    display: flex;
}
#silderLeft{
    width: 250px;
    height: 100%;    
    background-color: #999;
    position: relative;
    /* overflow-y: auto; */
}
/* 拖动条 */
.moveBtn{
    height: 100%;
    width: 10px;
    /* opacity: 0; */
    position: absolute;
    right: 0px;
    top: 0;
    cursor: col-resize;
    background-color: yellow;
}
.menuList{
    background-color: yellowgreen;
    /* height: 120%; */
}
.silderRight{
    height: 100%;
    background-color: sandybrown;
    flex: 1;
}
Nach dem Login kopieren

Du kannst Ändern Sie den benutzerdefinierten Befehl und legen Sie eine minimale Ziehbreite fest

directives: {
    move(el, bindings) {
      el.onmousedown = function(e) {
        var init = e.clientX;
        console.log(&#39;init&#39;,init);
        var parent = document.getElementById("sidebar");
        var initWidth = parent.offsetWidth;
        document.onmousemove = function(e) {
          var end = e.clientX;
          // end - init表示鼠标移动的距离
          // end为鼠标移动的宽度,可用于设置最小宽度
          if(end > 250){
            var newWidth = end - init + initWidth;
            parent.style.width = newWidth + "px";
          }else{
            end = 250;
            // 最小宽度242
            parent.style.width = 242 + "px";
          }
        };
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null;
        };
      };
    }
  }
Nach dem Login kopieren

Empfohlenes Lernen: php-Training

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein ziehbares Menü in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Windows 11: Der einfache Weg, Startlayouts zu importieren und zu exportieren Windows 11: Der einfache Weg, Startlayouts zu importieren und zu exportieren Aug 22, 2023 am 10:13 AM

In Windows 11 wurde das Startmenü neu gestaltet und verfügt über einen vereinfachten Satz von Apps, die in einem Seitenraster angeordnet sind, im Gegensatz zum Vorgänger, der Ordner, Apps und Apps im Startmenü hatte. Sie können das Startmenü-Layout anpassen und es auf andere Windows-Geräte importieren und exportieren, um es nach Ihren Wünschen zu personalisieren. In dieser Anleitung besprechen wir Schritt-für-Schritt-Anleitungen zum Importieren des Startlayouts, um das Standardlayout unter Windows 11 anzupassen. Was ist Import-StartLayout in Windows 11? „Startlayout importieren“ ist ein Cmdlet, das in Windows 10 und früheren Versionen zum Importieren von Anpassungen für das Startmenü verwendet wird

So stellen Sie im Rechtsklick-Menü von Windows 11 standardmäßig „Weitere Optionen anzeigen' ein So stellen Sie im Rechtsklick-Menü von Windows 11 standardmäßig „Weitere Optionen anzeigen' ein Jul 10, 2023 pm 12:33 PM

Eine der nervigsten Änderungen, die wir Benutzer nie wollen, ist die Aufnahme von „Weitere Optionen anzeigen“ in das Kontextmenü mit der rechten Maustaste. Sie können es jedoch entfernen und erhalten das klassische Kontextmenü in Windows 11 zurück. Kein Mehrfachklicken und Suchen nach diesen ZIP-Verknüpfungen in Kontextmenüs mehr. Befolgen Sie diese Anleitung, um unter Windows 11 zu einem vollständigen Kontextmenü mit der rechten Maustaste zurückzukehren. Fix 1 – CLSID manuell anpassen Dies ist die einzige manuelle Methode auf unserer Liste. Sie müssen bestimmte Schlüssel oder Werte im Registrierungseditor anpassen, um dieses Problem zu beheben. Hinweis – Registrierungsänderungen wie diese sind sehr sicher und funktionieren problemlos. Daher sollten Sie eine Sicherung der Registrierung erstellen, bevor Sie dies auf Ihrem System versuchen. Schritt 1 – Probieren Sie es aus

Lassen Sie uns ausführlich über reactive() in vue3 sprechen Lassen Sie uns ausführlich über reactive() in vue3 sprechen Jan 06, 2023 pm 09:21 PM

Vorwort: Bei der Entwicklung von vue3 bietet reactive eine Methode zur Implementierung reaktionsfähiger Daten. Dies ist eine häufig verwendete API in der täglichen Entwicklung. In diesem Artikel wird der Autor seinen internen Betriebsmechanismus untersuchen.

Detaillierte grafische Erklärung zur Integration des Ace-Code-Editors in ein Vue-Projekt Detaillierte grafische Erklärung zur Integration des Ace-Code-Editors in ein Vue-Projekt Apr 24, 2023 am 10:52 AM

Ace ist ein in JavaScript geschriebener einbettbarer Code-Editor. Es entspricht der Funktionalität und Leistung nativer Editoren wie Sublime, Vim und TextMate. Es kann problemlos in jede Webseite und JavaScript-Anwendung eingebettet werden. Ace wird als Haupteditor für die Cloud9-IDE gepflegt und ist der Nachfolger des Mozilla Skywriter (Bespin)-Projekts.

Erfahren Sie, wie Sie Unit-Tests in Vue3 schreiben Erfahren Sie, wie Sie Unit-Tests in Vue3 schreiben Apr 25, 2023 pm 07:41 PM

Vue.js ist heute ein sehr beliebtes Framework in der Front-End-Entwicklung. Da sich Vue.js ständig weiterentwickelt, werden Unit-Tests immer wichtiger. Heute untersuchen wir, wie man Unit-Tests in Vue.js 3 schreibt, und stellen einige Best Practices sowie häufige Probleme und Lösungen vor.

Was ist der Unterschied zwischen Komponentisierung und Modularisierung in Vue? Was ist der Unterschied zwischen Komponentisierung und Modularisierung in Vue? Dec 15, 2022 pm 12:54 PM

Der Unterschied zwischen Komponentisierung und Modularisierung: Die Modularisierung ist aus Sicht der Codelogik unterteilt. Sie erleichtert die Entwicklung auf Codeebene und stellt sicher, dass die Funktionen jedes Funktionsmoduls konsistent sind. Die Komponentisierung ist die Planung aus der Perspektive der UI-Schnittstelle; die Komponentisierung des Frontends erleichtert die Wiederverwendung von UI-Komponenten.

Ausführliche Diskussion darüber, wie Vite .env-Dateien analysiert Ausführliche Diskussion darüber, wie Vite .env-Dateien analysiert Jan 24, 2023 am 05:30 AM

Wenn wir das Vue-Framework zum Entwickeln von Front-End-Projekten verwenden, stellen wir bei der Bereitstellung mehrere Umgebungen bereit. Oft sind die von Entwicklungs-, Test- und Online-Umgebungen aufgerufenen Schnittstellendomänen unterschiedlich. Wie können wir die Unterscheidung treffen? Dabei werden Umgebungsvariablen und Muster verwendet.

Analysieren Sie das Prinzip der Implementierung der Kompositions-API durch Vue2 Analysieren Sie das Prinzip der Implementierung der Kompositions-API durch Vue2 Jan 13, 2023 am 08:30 AM

Seit der Veröffentlichung von Vue3 ist die Wortkompositions-API in das Blickfeld der Vue-Schreibenden gerückt. Ich glaube, jeder hat aufgrund der Veröffentlichung von @ immer gehört, wie viel besser die Kompositions-API ist als die vorherige Options-API. vue/composition-api-Plug-in, Vue2-Studenten können ebenfalls in den Bus einsteigen. Als Nächstes werden wir hauptsächlich Responsive Ref und Reactive verwenden, um eine eingehende Analyse durchzuführen, wie dieses Plug-In dies erreicht.

See all articles