admin管理员组

文章数量:1313157

I have an vue app that user vuetify. The app is used inside existing cms. When a dropdown select is opened a click outside the app does not close the dropdown. If the click is inside the app region, the dropdown closes.

Any idea how can I trigger close for the opened dropdown on click outside the app ?

new Vue({
  el: '#cartbutton',
  data() {
    return {
      items: [{text:'a'}, {text:'b'}]
    }
  }
})
.existing-cms {
  padding: 40px 50px;
}

#app {
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
  height: 200px;
}
<script src=".5.17/vue.js"></script>
<link href=".min.css" rel="stylesheet"/>
<script src=".min.js"></script>
<link href="+Icons" rel=stylesheet>

<div class="existing-cms">
  <p>Click on the select dropdown and leave it open.</p>
  <p>
    Click on this white region outside the app should somehow close
    opened select in the app.
  </p>
  
  <div id="cartbutton">
    <v-app>
      <span>Clicking here insde the app closed the opened select</span>
      <br><br>
      <v-select label="Click me and leave it opened. Then click in the white region." :items="items"></v-select>
    </v-app>
  </div>
  
</div>

I have an vue app that user vuetify. The app is used inside existing cms. When a dropdown select is opened a click outside the app does not close the dropdown. If the click is inside the app region, the dropdown closes.

Any idea how can I trigger close for the opened dropdown on click outside the app ?

new Vue({
  el: '#cartbutton',
  data() {
    return {
      items: [{text:'a'}, {text:'b'}]
    }
  }
})
.existing-cms {
  padding: 40px 50px;
}

#app {
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
  height: 200px;
}
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg./vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg./vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis./css?family=Material+Icons" rel=stylesheet>

<div class="existing-cms">
  <p>Click on the select dropdown and leave it open.</p>
  <p>
    Click on this white region outside the app should somehow close
    opened select in the app.
  </p>
  
  <div id="cartbutton">
    <v-app>
      <span>Clicking here insde the app closed the opened select</span>
      <br><br>
      <v-select label="Click me and leave it opened. Then click in the white region." :items="items"></v-select>
    </v-app>
  </div>
  
</div>

Here is a codepen link https://codepen.io/darkopetreski/pen/OGMvop

EDIT:

It seems that this is reported as a bug here https://github./vuetifyjs/vuetify/issues/3144 and the suggestion is to use data-app="true" at the root element, but this approach is not good, since it will mess up stuff (at least was not working well for me).

Share Improve this question edited May 9, 2019 at 14:06 darpet asked May 8, 2019 at 18:51 darpetdarpet 3,1313 gold badges34 silver badges40 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

This is a rather hacky solution but it seems to work. There are two changes:

1) Add a window click listener that calls the blur method on the v-select. This hides the control. To facilitate this I added a ref to the v-select ponent.

2) To prevent this firing when they click inside the app or on the v-select, I added a stop propagation @click.stop onto the container.

https://codepen.io/anon/pen/BeoOMz

new Vue({
  el: '#cartbutton',
  data() {
    return {
      items: [{text:'a'}, {text:'b'}]
    }
  },
  mounted() {
    window.addEventListener("click",() => {
       this.$refs.select.blur();
    });    
  }
})
.existing-cms {
  padding: 40px 50px;
}

#app {
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
  height: 200px;
}
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg./vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg./vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis./css?family=Material+Icons" rel=stylesheet>

<div class="existing-cms">
  <p>Click on the select dropdown and leave it open.</p>
  <p>
    Click on this white region outside the app should somehow close
    opened select in the app.
  </p>
  
  <div id="cartbutton" @click.stop>
    <v-app>
      <span>Clicking here insde the app closed the opened select</span>
      <br><br>
      <v-select ref="select" label="Click me and leave it opened. Then click in the white region." :items="items"></v-select>
    </v-app>
  </div>
  
</div>

本文标签: javascriptHow to close vselect on click outside vappStack Overflow