Home Javascript A Simple and Highly Customized Menu Solution | v-selectmenu

A Simple and Highly Customized Menu Solution | v-selectmenu

Javascript webcodeflow · August 16, 2022 · Comments off

v-selectmenu is a simple, easiest, and highly customized menu solution for Vue2.

Features

Support i18n, provide Chinese, English, and Japanese languages
Regular menu multi-level support
Multiple group type support
Advanced menu mode with a quick search
Keyboard to quickly navigate in advanced menu mode
Display custom row content
Embedded in page
Right-click (context menu) or move the mouse to the connection menu

How to make use of it:

Installation

npm i v-selectmenu --save

Include a plugin in your main.js file.

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

Usage

<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>

customized menu solution for vue js, v-selectmenu Plugin/Github