Minimal Dropdown Popup Plugin For Vue – v-dropdown

A simple clean dropdown popup plugin for Vue.js. If you’re looking for an interactive popup that appears under the element on click, this dropdown plugin is for you.

How to use it:

1. Import and register the dropdown plugin.

import Dropdown from 'v-dropdown'
export default {
  components: {
    'v-dropdown': Dropdown
  }
}

2. Attach the dropdown popup to a trigger element.

export default {
  components: {
    'v-dropdown': Dropdown
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    showChange (val) {
      this.show = val
    }
  }
}

3. Available props.

/** direction */
align: { type: String, default: 'left' },
/**
 * dropdown popup embedded to page/component
 */
embed: { type: Boolean, default: false },
border: { type: Boolean, default: true },
/**
 * mouse right click caller area to display dropdown
 */
rightClick: { type: Boolean, default: false },
/**
 * click caller and display dropdown, the
 * caller click again whether to close dropdown
 */
toggle: { type: Boolean, default: true },
/** manual show / close the dropdown */
manual: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
/**
 * open / close dropdown animation
 *
 * {boolean}
 *   - true: use default animation
 *   - false: don't show animation
 * {string} customized animation
 */
animated: { type: [String, Boolean], default: true },
/**
 * width of drop down menu
 * min-width: 80
 */
width: Number,
/**
 * container width
 * false: inline-block
 * true: block
 */
fullWidth: { type: Boolean, default: false }

Preview:

Download Details:

Author: TerryZ

Live Demo: https://codepen.io/terry05/pen/BggbrK

Download Link: https://github.com/TerryZ/v-dropdown/archive/refs/heads/dev.zip

Official Website: https://github.com/TerryZ/v-dropdown

Install & Download:

# Yarn
$ yarn add v-dropdown

# NPM
$ npm i v-dropdown