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.list {
  z-index: 10;
}
div.name:hover {
  cursor: pointer;
}
div.overlay {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
 
Vue.component('dropdown', {
  props: ['key'],
  data() {
    return {
      show: false,
    };
  },
  template: `
      <div>
        <div class="name" @click="toggleDisplay()">
          下拉{{ key }}
        </div>
        <div class="list" v-show="show">
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </div>
        <div class="overlay" @click.stop="hide()" v-show="show"></div>
      </div>`,
  methods: {
    hide() {
      this.show = false;
    },
    toggleDisplay() {
      this.show = !this.show;
    },
  },
});
new Vue({
  el: '#app'
});
​
Output

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

Dismiss x