vue右键菜单高度无法设置_一个简单且高度定制的Vue2菜单解决方案

vue右键菜单高度无法设置

v选择菜单 (v-selectmenu)

A simple, easier and highly customized menu solution.

一个简单，容易和高度定制的菜单解决方案。

View demo 查看演示 Download Source 下载源

特征 (Features)

• i18n support, provide Chinese, English, Japanese languages

  i18n支持，提供中文，英文，日文

• regular menu multiple level support

  常规菜单多级支持

• multiple group type support

  多组类型支持

• advance menu mode with quick search

  快速搜索高级菜单模式

• keyboard to quick navigate in advance menu mode

  键盘可在高级菜单模式下快速导航

• custom row content render

  自定义行内容呈现

• embedded to page

  嵌入到页面

• mouse right click(contextmenu) or mouse move to call menu

  鼠标右键单击(上下文菜单)或将鼠标移到呼叫菜单

插件预览 (Plugin preview)

regular menu

常规菜单

regular menu group type

常规菜单组类型

advance menu group type

高级菜单组类型

安装 (Install)

npm install v-selectmenu --save

Include plugin in your main.js file.

在main.js文件中包含插件。

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

在您的组件上部署(默认高级模式) (Deploy on your component(default advance mode))

<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:'克里夫兰骑士'},
                    {...}
                ]
            };
        }
    };
</script>

翻译自: https://vuejsexamples.com/a-simple-and-highly-customized-menu-solution-for-vue2/

vue右键菜单高度无法设置