Watch Star Fork

TerryZ / v-selectmenuJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
基于 Vue2 的简洁、易用、高定制化的菜单解决方案 https://terryz.gitee.io/vue/#/selectmenu
Loading...
README.md 5.12 KB



v-selectmenu


v-selectmenu

基于 Vue2 的简洁、易用、高定制化的菜单解决方案






文档、Demo

请浏览

jQuery 版本: SelectMenu



功能特性

  • i18n 支持,提供了中文、英文、日文三种语言
  • 常规模式菜单支持多级菜单
  • 多分组模式支持
  • 高级菜单模式下支持快速搜索
  • 高级菜单模式下支持使用键盘进行快速导航
  • 自定义渲染行内容
  • 嵌入页面模式
  • 鼠标右键或鼠标移动呼出菜单



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



插件预览

常规模式菜单

regular

常规模式菜单分组类型

regular-group

高级模式菜单分组类型

advance



安装

npm install v-selectmenu --save

在项目入口文件 main.js 中导入插件

import Vue from 'vue'
import vSelectMenu from 'v-selectmenu';
Vue.use(vSelectMenu);

在页面中使用 (默认为高级菜单模式)

template

<template>
    <v-selectmenu :data="list" class="form-control" 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:'克里夫兰骑士'},
                {...}
            ]
        };
    }
};



项目点评 ( 0 )

你可以在登录后,发表评论

搜索帮助