Vuejs-V selectmenu v2.0.2: v-selectmenu - A simple, easier and highly customized menu solution for Vue2.

icon
Latest Release: v2.0.2

Changelog:

  • Fixed long text issues #13
Source code(tar.gz)
Source code(zip)

v-selectmenu circle ci code coverage npm version npm download JavaScript Style Guide

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

Comments

  • fix: results -> data
    fix: results -> data

    Feb 24, 2019

    Fixing an issue with data not being updated by renaming results to data etc.

    Needs test/inspection.

    Reply
  • v-select emitting `input` on load
    v-select emitting `input` on load

    Mar 1, 2019

    The component is emitting an input event when it loads, which triggers event handlers despite there being no change in model data.

    Reply
  • Bug: The `@values` event is not sent after the v-selectmenu component is re-rendered
    Bug: The `@values` event is not sent after the v-selectmenu component is re-rendered

    Sep 11, 2019

    Description of bug

    I have an instance of v-selectmenu that is toggled on/off using the Vuejs v-if directive. I also listen to the @values event on this component.

    <v-selectmenu v-if="condition" @values="onValuesEvent" ...
    

    If the component is hidden and re-rendered when condition changes from true to false to true, the @values event is no longer emitted!

    Reply
  • v-selectmenu not working in  v-dialogs
    v-selectmenu not working in v-dialogs

    Oct 27, 2019

    I use v-selectmenu out of v-dialogs it working well, but i use it in v-dialogs modal it not working

    Reply
  • Select All in Advanced Menu with Groups does partial selection only
    Select All in Advanced Menu with Groups does partial selection only

    Dec 9, 2019

    Hi,

    When I loaded a group data set, clicking the "select all" checkbox selects only the items of the active group, not every item in the menu. Is there a way to get everything selected (rather than forcing end-users to enter each group first)?

    If I have an event like 'Select All clicked', I could check the number of items picked against the total number of items in the menu and cater for the difference but here I cannot hook into a 'Select all clicked' event/call.

    Thank you!

    Reply
  • Keyboard navigation not working without search bar
    Keyboard navigation not working without search bar

    Jan 4, 2020

    Hi,

    When the search bar is disabled (:query="false"), I'm unable to navigate through the options using the keyboard, which is often done by our power users.

    Thanks!

    Reply
  • Needs small Accessibility improvements
    Needs small Accessibility improvements

    Feb 20, 2020

    A couple of adjustments could be made to improve accessibility (a11y):

    1. The search input in the dropdown needs to have a label and or aria tags (even if not visible)
    2. The dropdown header (sm-header) should probably not be an H3, best to use a class instead, since modifying the template is not an option for that item. Have an H3 causes conflicts with the rest of the document hierarchy.

    I am using the WAVE tool for A11Y https://wave.webaim.org/

    enhancement 
    Reply
  • 关于样式修改
    关于样式修改

    Apr 14, 2020

    标签目前是动态适应的,怎么设置成固定长度?选项的背景样式怎么设置?

    Reply
  • Change the advanced_default for each instance
    Change the advanced_default for each instance

    Sep 2, 2020

    Hi, rather than all of the instances displaying "Select an option", I would like them to say "Select a Building" or "Select a Floor"

    Is this possible? I can't see a way.

    Reply
  • multiple 开启时,values会触发两次
    multiple 开启时,values会触发两次

    Jan 24, 2022

    advanced模式中 multiple开启时,当选中任意个数项目时,values会触发两次。但如果清空,会只触发一次。 在https://codepen.io/terry05/pen/WNeEZRd 示例中,将最后一个例子上挂上@values函数,并在函数中加console.log 即可观察到该现象。

    Reply
  • Languages: French support
    Languages: French support

    Nov 12, 2019

    Adding French support

                                                                                                                                                                                                           
    Reply
  • Data values cleared when
    Data values cleared when "Select All" chosen twice

    Nov 9, 2018

    Steps to Reproduce:

    1. Create an advanced menu with the multiple choice option.
    2. Choose menu and in "Select Option" popup, click the Select All button (checkbox) twice or more times.
    3. Clear the selections (trash can).
    4. All data values in the list will disappear resulting in the "not found" message.

    Just started to look into this, but just thought I would post it to let you know.

    bug 
    Reply
  • Select Menu doesn't seem to update if data modifies
    Select Menu doesn't seem to update if data modifies

    Dec 24, 2018

    I'm lazying loading the contents and the drop down doesn't seem to rebind the data source.

    Reply
  • Customize Header
    Customize Header

    Jul 29, 2018

    could i change your header v-selectmenu "select an option" ?, i wanna make some customization in header. please can you make it customizeable?

    Reply
  • added activeTab as prob for setting tabIndex
    added activeTab as prob for setting tabIndex

    Jan 31, 2019

    Right now, the active tab is set on click, this adds a prop to let the parent component set the activeIndex from its side.

    Reply
  • Setting regular to true doesn't respect key-field or show-field
    Setting regular to true doesn't respect key-field or show-field

    Dec 24, 2018

                                                                                                                                                                                                           
    Reply
  • Button text is not being updated
    Button text is not being updated

    Dec 6, 2018

    After selecting an option button text should be changed. It always shows Select an option

    <v-selectmenu v-model="state.selectedChatFilter"
                              :regular="true"
                              :data="chatFilters"></v-selectmenu>
    
    chatFilters: [
    	{name: 'Active Chats', id: 'activeChats', content: 'Active Chats'},
    	{name: 'Closed Chats', id: 'closedChats', content: 'Closed Chats'},
    	{name: 'All Chats', id: 'allChats', content: 'All Chats'}
    ]
    selectedChatFilter = 'activeChats'
    

    Also if I remove key content from list, text (Active Chats/Closed Chats/All Chats) is not being displayed in options

    Reply
  • add item problem
    add item problem

    Sep 19, 2018

    my system setting is here:

    vue.js version: vue2
    using library:
    1. vue-cli
    2. bootstrap-vue
    

    and my source code

    <b-col sm="2">
              <v-selectmenu 
                :data="app_list"
                language='en'
                :multiple='true'
                key-field="id"
                show-field="name"
                v-model="app_value"
                title='Select Your App'
                ref='test'>
              </v-selectmenu>        
    </b-col>
    <script>
    import vSelectMenu from 'v-selectmenu'
    Vue.use(vSelectMenu);
    
    export default {
        name : 'App_test',  
        props: ['sessionKey'],
        components: {
        },
        data:function () {
           let options = qs.parse(location.search, { ignoreQueryPrefix: true })
           return {
               app_value:'',
               app_list:[
                   {
                       id:0, name:'test',
                   }
               ],
         },
        methods:{
            getDate(){
                let url = myUrl;
                let api_url = axios.get(url)
                api_url.then((response)=>{
                     for(let i =0; i<response.data.length; i++){
                            this.app_list.push({id:i+1, name:response.data[i]})
                     }
                })
            }
        }
    }
    

    However, v-selectmenu list can't update variable values. looks like this.

    result:

    menu list: test
    console.log(app_list):
    [ { "id": 0, "name": "test" }, { "id": 1, "name": "HAI" }, { "id": 2, "name": "TEST012" } ]
    

    How can i solve this problem?

    Reply
  • Documentation?
    Documentation?

    Aug 7, 2018

    Great UI and i gave u a star and forked this UI but where is the documentation? Simple things should be explained better, for example, how do i change "select an option" ? I don't want use i18n but i have too, and i can't change the title without language.js. I need a dynamic option to change the title but i couldn't find anything on GH (i am sure there is a way to do it). I don't want to use Vue.use(), how do i use it without "use()"? How can i use the {options} without use()? These small things should have examples or documentation. As i said, great UI(loved it), but not many will use it only because we don't have examples or documentation and running through the code to understand how it works some dev have no time. The documentation or good examples solve these problems. What i found is a short briefing and this is not enough to make the development enjoyable.

    Reply
  • use router-links in NESTED menu?
    use router-links in NESTED menu?

    Jan 28, 2020

    You sent me this on reddit:

    For custom router-link:
    
    <v-selectmenu :data="list" type="regular" >
      <template #row="{ row }">
        <router-link :to="row.url" >{{row.name}}</router-link>
      </template>
    </v-selectmenu>
    

    But that doesn't seem to work if the menu is nested. Is it possible to use router-links for nested items?

    Reply