SelectMenu for Vuejs

SelectMenu for Vuejs

SelectMenu for Vuejs, A simple, easier and highly customized menu solution

v-selectmenu

SelectMenu for Vuejs, A simple, easier and highly customized menu solution

Examples and Documentation

Live Examples on CodePen, more examples and documentation please visit below

The jQuery version: SelectMenu

Features

  • i18n support, provide Chinese, English, Japanese languages
  • regular menu multiple level support
  • multiple group type support
  • advanced menu mode with quick search
  • keyboard to quick navigate in advanced menu mode
  • custom row content render
  • embedded to page
  • mouse right click(contextmenu) or mouse move to call menu

Plugin preview

regular menu

regular

regular menu with group type

regular-group

advanced menu with group type

advanced

Installation

npm i v-selectmenu --save

Include plugin in your main.js file.

import Vue from 'vue'
import vSelectMenu from 'v-selectmenu';
Vue.use(vSelectMenu, { global config options... });

Usage (advanced menu mode by default)

<template>
  <v-selectmenu :data="list" v-model="value">
  </v-selectmenu>
</template>

<script>
  export default {
    data(){
      return {
        value: '',
        list: [
          { id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
          { id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' },
          { ... }
        ]
      }
    }
  }
</script>

License

license

Dependenics

Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree, and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution

Download Details:

Author: TerryZ

Demo: https://terryz.github.io/vue/#/selectmenu

Source Code: https://github.com/TerryZ/v-selectmenu

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.