vue.js メニューコンポーネントの書き方-Vue.js-php.cn

vue.js メニューコンポーネントの書き方

coldplay.xixi

リリース： 2020-11-30 13:33:44

オリジナル

3231 人が閲覧しました

vue.js メニューコンポーネントの記述方法: 最初に [index.html] を使用してエントリページを記述し、次に [clickoutside.js] ドロップダウンボックスコンポーネントを使用します。コードは [Vue.directive] です。 ('clickoutside']; 最後に、スタイルシートが実装されます。

vue.js メニューコンポーネントの書き方

[関連記事の推奨事項: vue.js]
このチュートリアルの動作環境: Windows7 システム、Vue2 .9.6 バージョン、この方法はすべてのブランドのコンピューターに適用できます。

vue.js メニューコンポーネントの作成方法:

1. エントリページのindex.html

<!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>

ログイン後にコピー

2. ルートインスタンスのindex.js

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

ログイン後にコピー

3. ドロップ-ダウンボックスコンポーネント clickoutside.js

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__;
 }
});

ログイン後にコピー

4. スタイルシート

[v-cloak]{
 display: none;
}
.main{
 width: 125px;
}
button{
 display: block;
 width: 100%;
 color: #fff;
 background-color: #39f;
 border: 0;
 padding: 6px;
 text-align: center;
 font-size: 12px;
 border-radius: 4px;
 cursor: pointer;
 outline: none;
 position: relative;
}
button:active{
 top:1px;
 left: 1px;
}
.dropdown{
 width:100%;
 height: 150px;
 margin: 5px 0;
 font-size: 12px;
 background-color: #fff;
 border-radius: 4px;
 box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.dropdown p{
 display: inline-block;
 padding: 6px;
}

ログイン後にコピー