Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

dropdown

v1.1.32arrow_drop_down
v1.1.32
STATUS
Passing
DOWNLOADS
31
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
2 KB
1 contributor
Install dropdown as a package?
Copied
npm i @bit/myliang.fish-ui.dropdown
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
components/Dropdown.vue
44 Lines(44 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <div :class="classObject" @click="clickHandler" v-clickoutside="awayHandler">
    <slot name="title"></slot>
    <fish-menu v-show="visible" class="content" @click="menusClickHandler">
      <slot></slot>
    </fish-menu>
  </div>
</template>
<script>
  import clickoutside from '../directives/clickoutside'
  import fishMenu from './Menu'
  export default {
    components: {fishMenu},
    directives: { clickoutside },
    name: 'fish-dropdown',
    props: {
      align: { type: String, default: 'bottom-left' } // bottom-left, bottom-right, top-left, top-right
    },
    data () {
      return {
        visible: false
      }
    },
    computed: {
      classObject () {
        return [
          'fish dropdown',
          this.align
        ]
      }
    },
    methods: {
      clickHandler () {
        this.visible = !this.visible
      },
      awayHandler () {
        this.visible = false
      },
      menusClickHandler () {
        this.visible = false
      }
    }
  }
</script>