vue.js

ตอนนี้ผมเขียนโปรเจ็คอยู่โปรเจ็คหนึง ซึ่งผมต้องใช้ TreeView ในการทำงาน
นี้คือโคดที่ผมใช้ (https://codepen.io/anon/pen/WaoBZY)
ซึ่งตอนนี้มีเมนูขึ้นมาตอนที่เมาส์ลากผ่าน ที่ผมต้องการให้เมนูขึ้นเฉพาะตอนคลิกขวาเท่านั้น
ไม่รู้ผมมาถูกทางไหมนะ แต่ผมหาคำตอบมาสองวันละ ผมเขียน Basic ยังแทบไม่รู้เรื่อง ที่หาเห็นมีแต่ Advance
(ผมอยากได้ประมาณแบบนี้ https://jsfiddle.net/Wijmo5/kt8r17hq/ ครับ)

[โคตผม
<div class="dropdown">
        <v-container >
         <ul id="myUL">
            <li><button @contextmenu.prevent="handler"><span class="caret"><input type="checkbox" data-role="switch">Organization (Blank)</span></button>
              <ul class="nested">
                <li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">Department (Blank)</button></li>
                <li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">Local Administration (Blank)</button></li>
                <ul class="nested">
                 <li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">User ID (Blank)</button></li>
                 <li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">User ID (Blank)</button></li>
                </ul>
              </ul>
            </li>
         </ul>
        </v-container>
        <div @click="handler" class="dropdown-content">
         <a href="#">Link 1</a>
         <a href="#">Link 2</a>
         <a href="#">Link 3</a>
        </div>
      </div>
<style>
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 100px;
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 2px 1px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #adadad;}
</style>
]
แสดงความคิดเห็น
โปรดศึกษาและยอมรับนโยบายข้อมูลส่วนบุคคลก่อนเริ่มใช้งาน อ่านเพิ่มเติมได้ที่นี่