So schreiben Sie eine vue.js-Menükomponente-View.js-php.cn

So schreiben Sie eine vue.js-Menükomponente

coldplay.xixi

Freigeben： 2020-11-30 13:33:44

Original

3205 Leute haben es durchsucht

So schreiben Sie die Menükomponente vue.js: Verwenden Sie zuerst [index.html], um die Einstiegsseite zu schreiben. Verwenden Sie dann die Dropdown-Box-Komponente [clickoutside.js]. Der Code lautet [Vue.directive('clickoutside'). ]; schließlich das Stylesheet implementieren.

So schreiben Sie eine vue.js-Menükomponente

【Empfohlene verwandte Artikel: vue.js】
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6, diese Methode ist für alle Marken geeignet von Computern

Schreiben Sie die Menükomponente vue.js:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>可从外部关闭的下拉菜单</title>
 <link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
 <div id="app" v-cloak>
  <div v-clickoutside="handleClose">
   <button @click="show = !show">点击显示下拉菜单</button>
   <div v-show="show">
    <p>下拉框的内容，点击外面区域可以关闭</p>
   </div>
  </div>
 </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="clickoutside.js"></script>
 <script src="index.js"></script>
</body>
</html>

Nach dem Login kopieren

2. Root-Instanz index.js

3 clickoutside.js

var app = new Vue({
 el: &#39;#app&#39;,
 data: {
  show: false
 },
 methods: {
  handleClose () {
   this.show = false;
  }
 }
});

Nach dem Login kopieren

4. Stylesheet

Vue.directive(&#39;clickoutside&#39;,{
 bind: function (el, binding, vnode) {
  function documentHandler(e) {
   if(el.contains(e.target)){
    return false;
   }
   if(binding.expression){
    binding.value(e);
   }
  }
  el.__vueClickOutside__ = documentHandler;
  document.addEventListener(&#39;click&#39;,documentHandler);
 },
 unbind: function (el, binding) {
  document.removeEventListener(&#39;click&#39;, el.__vueClickOutside__);
  delete el.__vueClickOutside__;
 }
});

Nach dem Login kopieren

Verwandte kostenlose Lernempfehlungen:
JavaScript (Video)
Das obige ist der detaillierte Inhalt vonSo schreiben Sie eine vue.js-Menükomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!