جافاسكريبت - حدث التمويه لمكون فيو مخصص

ما لدي
قائمة منسدلة مخصصة تحتوي على حقل إدخال نص للتصفية أعلاها. يمكن فتح القائمة المنسدلة بشكل مستقل عن حقل إدخال النص للتصفية.

ما أريده
السلوك المقصود هو أن يغلق القائمة المنسدلة عند فقدان خانة إدخال الفلتر للتركيز وأيضًا عند النقر بالفأرة خارج القائمة المنسدلة، بحيث تفقد القائمة المنسدلة التركيز.

ما جربته

• اربط بحدث الضبابية على عنصر div الجذري في التحكم، والذي لا يتم تشغيله على الإطلاق.
• لم أتمكن أيضًا من العثور على أي شيء عن طرق المكونات الداخلية التي يمكنني تجاوزها.

الرمز

  <div @blur="onRootLostFocus">
    ...
  </div>

  ...
  ...
  ...

  onRootLostFocus() {
    console.log('LostFocus');
    this.deactivateSearchPanel();
    this.deactivateSelectionPanel();
  }

حل

لقد فاتني أن العنصر div يحتاج إلى tabindex="0" ليكون قابلاً للتركيز، هذا حل مشكلتي

الإجابة رقم 1

شيء مثل هذا?

الإجابة: تحتاج إلى تعيين tabindex="0" لجعله قابلًا للتركيز.

إليك قائمة منسدلة مخصصة وكيف يمكنك القيام بذلك:

Vue.component("dropdown", {
   props: ["value"],
   data(){
      return {
         open: false,
         options: ["BMW", "Fiat", "Citroen", "Audi", "Tesla"]
      }
   },
   methods: {
      toggleDropdown() {
         this.open = !this.open;
      },
      closeDropdown(){
         this.open = false;
      },
      selectOption(option) {
         this.$emit("input", option);
      }
   },
   template: `<div class="dropdown">
   <div @blur="closeDropdown" tabindex="0" ref="dropdown" @click="toggleDropdown" class="select">
   {{ value }}
   </div>
   <div class="options" :style="{'max-height': open ? '300px' : '0px'}">
      <div v-for="option in options" @mousedown="selectOption(option)" class="option">
         {{ option }}
      </div>
   </div>
</div>`
})

new Vue({
   el: "#app",
   data: {
      selectedCar: "BMW"
   }
})

.dropdown {
   width: 200px;
   position: relative;
}

.select {
   height: 40px;
   position: absolute;
   left: 0;
   width: 100%;
   background: green;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   cursor: pointer;
}
.option {
   width: 100%;
   height: 40px;
   background: darkgreen;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}
.option:hover {
   background: green;
}
.options {
   overflow: hidden;
   transition: max-height 200ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"> <p>
   {{ selectedCar }}</p>
   <dropdown v-model="selectedCar" />
  
</div>