मेरे पास गतिशील रूप से बढ़ने वाला ड्रॉपडाउन घटक है (स्क्रीन में अन्य ड्रॉपडाउन जोड़े जाते हैं) और घटक के अंदर, मैं एक क्लिक बाहरी निर्देश का उपयोग करता हूं, जब मेरे पास स्क्रीन पर केवल 1 ड्रॉपडाउन होता है तो यह पूरी तरह से काम करता है, लेकिन जब एक से अधिक ड्रॉपडाउन क्लिक दिखाई देता है बाहर संघर्ष करेगा, जिससे कोई ड्रॉपडाउन नहीं खुलेगा।

ड्रॉपडाउन बंद होने पर मैंने एक अनबाइंड को हल करने के बारे में सोचा, लेकिन मुझे नहीं पता कि यह कैसे करना है।

directive-clickoutside.js

export default {
  bind(el, binding, vNode) {
    console.log('bind');
    // Provided expression must evaluate to a function.
    if (typeof binding.value !== 'function') {
      const compName = vNode.context.name;
      let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`;
      if (compName) { warn += `Found in component '${compName}'` }

      console.warn(warn);
    }
    // Define Handler and cache it on the element
    // eslint-disable-next-line prefer-destructuring
    const bubble = binding.modifiers.bubble;
    const handler = (e) => {
      if (bubble || (!el.contains(e.target) && el !== e.target)) {
        binding.value(e);
      }
    };
    // eslint-disable-next-line no-underscore-dangle
    el.__vueClickOutside__ = handler;

    // add Event Listeners
    document.addEventListener('click', handler);
  },

  unbind(el, binding) {
    // Remove Event Listeners
    console.log('unbind');
    // eslint-disable-next-line no-underscore-dangle
    document.removeEventListener('click', el.__vueClickOutside__);
    // eslint-disable-next-line no-underscore-dangle
    el.__vueClickOutside__ = null;
  },
};

DropdownComponent.vue

<template>
    <div v-for="type in criticalityTypes" :key="type" id="users-list-form" class="users-list-form neo-col" :class="type">
      <div class="neo-form-select neo-form-select__filter"
         v-click-outside="currentOpenType ? closeList : doNothing"
         :class="{'neo-is-open': open[type]}">
        <input type="text"
               class="neo-form-field neo-form-select__field"
               @click="showList(type)"
               :placeholder="inputPlaceholder(type)"
               v-model="searchQuery[type]">
        <span class="neo-form-select__icon" @click="showList(type)"></span>
        <div class="neo-form-select__options">
        // OMMITED CODE
        </div>
      </div>
    </div>
</template>

<script>
import clickOutside from '../../../../directives/clickoutside.js';

export default {
  name: 'ConfigUsersNotification',
  props: [
    'data',
    'criticalityTypes',
  ],
  directives: {
    clickOutside,
  },
  data() {
    return {
      open: {
        CRITICALITY_HIGH: false,
        CRITICALITY_MEDIUM: false,
        CRITICALITY_LOW: false,
      },
      searchQuery: {
        CRITICALITY_HIGH: '',
        CRITICALITY_MEDIUM: '',
        CRITICALITY_LOW: '',
      },
      currentOpenType: '',
    };
  },
  methods: {
    showList(type) {
      if (!this.open[type]) {
        this.open[type] = !this.open[type];
      }
      this.currentOpenType = type;
      this.closeOthers(type);
      if (this.data.length === 0) {
        this.$emit('loadUsers');
      }
    },
    closeList() {
      this.open[this.currentOpenType] = false;
      this.currentOpenType = '';
    },
    closeOthers(type) {
      Object.keys(this.open).forEach((item) => {
        if (item !== type) {
          this.open[item] = false;
        }
      });
    },
  },
};
</script>

criticalityTypes में मुझे एक सरणी मिलती है, कभी-कभी मेरे पास केवल एक आइटम होता है, कभी-कभी दो...

फिर से शुरू करें: जब मेरे पास देखने में केवल एक ड्रॉपडाउन होता है, तो पूरी तरह से काम करता है, हालांकि जब मेरे पास एक से अधिक क्लिक बाहरी विरोध होते हैं, तो मुझे लगता है कि उस समस्या को हल करने के लिए, ड्रॉपडाउन बंद होने पर बाहर क्लिक को अनबाइंड करना और खुले होने पर बाध्य करना है, लेकिन मुझे नहीं पता कि कैसे करना है।

कोई मदद?

0
Jefferson Bruchado 31 जुलाई 2019, 18:36

1 उत्तर

सबसे बढ़िया उत्तर

एलिमेंट पर होने वाले क्लिक को document पर बबल होने से रोकने से वे पेज के किसी भी अन्य तत्व की क्लिक-आउट कार्यक्षमता को ट्रिगर करने से रोकेंगे।

तो एक जोड़ें

el.addEventListener('click', function(e) { e.stopPropagation(); }); 

... बाइंड फ़ंक्शन के अंत में

1
tao 1 अगस्त 2019, 09:08