Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</head>
<body id="app">
  <dropdown key="1"></dropdown>
  <dropdown key="2"></dropdown>
</body>
</html>
 
body {
  display: flex;
  > div {
    margin-right: 10px;
  }
}
div.name:hover {
  cursor: pointer;
}
 
Vue.component('dropdown', {
  props: ['key'],
  data() {
    return {
      show: false,
    };
  },
  template: `
    <div>
      <div class="name">
        下拉{{ key }}
      </div>
      <div class="list" v-show="show">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>`,
  methods: {
    hide() {
      this.show = false;
    },
    toggleDisplay() {
      this.show = !this.show;
    },
    blurHandler(event) {
      const target = event.target;
      const name = this.$el.querySelector('div.name');
      console.log(target);
      console.log(name);
      console.log(target === name);
      if (target === name) {
        console.log(this.key, this.show);
        this.toggleDisplay();
      } else {
        console.log(this.key, this.show);
        this.hide();
      }
    },
  },
  ready() {
    window.addEventListener('click', this.blurHandler, false);
  },
});
new Vue({
  el: '#app'
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x