百度的话会出现两个版本 一个是 vue-contextmenu 还有一个是 v-contextmenu
这两个我都用了一下 确切的说我是先用的第一个但是 无法实现添加icon 的功能，所以又找到了第二个。
vue-contextmenu 添加icon需要使用到 font Awesome 但是引入后，修改无法实现icon 的效果，可能是我还不会用 这里我就直接附上链接啦
vue contextmenu
另一个是 v contextmenu 这个的使用和功能都相对要比另一个更加全面一点。
cnpm i v-contextmenu -S
可以安装依赖
mainjs 全局引用
Submenuvue
例子在github中都有提供，大家可以根据自己想要用的样式来自己选择
只给张图，就只能泛泛说说解决方案
方案一，Ajax。level中选择后触发函数，重新加载下面的列表信息。这样写的话，level和后面的自动手动以及价格、日期、地点、排序等都可以作为参数传给后台，返回相应的json信息，解析后显示。
方案二，js遍历。用js遍历所有行，与level不相等的予以隐藏。
----
vue从后台获取的数据有html标签通过v-html渲染到页面给html添加样式的方法如下：
准备材料：Vuejs、HBuilder、浏览器
1、创建静态页面vhtmlhtml，并引入vuejs文件。
2、在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令。
3、绑定v-html指令数据，这里设置为字符串。
4、Vuejs库的v-html指令是插入html元素，修改datas为包含<p></p>标签。
5、预览该静态页面，这时会看到页面显示如下
6、将调试打开，这时发现<div></div>中有个<p></p>标签，完成添加。
1 做后台管理项目必不可少会用到图标，关于使用和选择图标，大家可以参考这篇文章： 手摸手，带你优雅的使用 icon - 掘金 ，我在项目中用的是vue-fontawesome
2 文档写的很详细，大家一看就明白了，文档： >
VUE是前端开发框架。诞生于2014年吧。
原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器可以运行js来执行一些js支持的动作，例如点击反馈，下拉菜单、 *** 作html的DOM元素之类。这样开放效率就很低了。
后来诞生了一些前端开发框架，VUE就是其中之一。目前在国内前端开发中，特别是手机app的h5页面的开发部分，被很多公司采用。
使用VUE开发的时候，不需要js直接 *** 作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给出了实现方案，开发只写简单的html和js语句就可以实现。
VUE开发的工具一般是visio stdio code（vscode），稍微适应两天就可以熟练应用了。还是很强大的。
但是vscode本身只是编辑器，开发编译类语言需要自己配编译环境，具体我没配过。
前端开发不需要配编译环境了，只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。
刚建立好的项目一定是下面这种目录结构（ranktablevue是我后加的
这对于新手村的人会引起头晕呕吐，老子啥都没写就出来这么多文件，不但数量不少，文件种类还齐全。
学习VUE别想一下吃的太多，除非你本身前端经验丰富。否则先看懂红色箭头的几个文件吧，看懂这几个就算入门了。看的顺序严格按照下面这样。
indexhtml->mainjs->Appvue->indexjs->HelloWorldvue
我将这几个文件大概讲一讲，你就能有个清晰的脉络了。
一、indexhtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=10">
<title>tradedatapy</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
页面开发当然是要有html了，VUE开发也不例外。这个html就是整个项目的入口了。只不过是<body>里面过于简单。<div id="app"></div>表示本html绑定了一个id为app的VUE对象。
二、mainjs
new Vue({ //new Vue语句就是定义了一个VUE对象
el: '#app', //vue对象的id是app
router,
components: { App }, //vue的组件名是APP
template: '<App/>' //template 名是APP
})
这就定义了一个app的VUE对象，indexhtml就可以找到它了。
三、Appvue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App' //export 了名为App的组件，mainjs就可以找到它了
}
</script>
上面的template都理解为html的一部分片断就行了，片断可以拼接到html对应的位置，构成一个有内容的完整的页面。<img src="/assets/logopng">这句被我注释了，否则页面会显示这个的。下面的<route-view/>部分是路由，根据用户的url不同，会路由到不同的vue文件，进而展示不同的页面内容。
四、indexjs
项目里有不只一个indexjs，一定看准了，我要讲解的是router目录下的indexjs
//这里的配置决定了Appvue里<router-view/>位置会展示什么内容
export default new Router({
routes: [
{
path: '/', //当用户访问 >
1，创建菜单所以对应的页面
2，创建页面所对应的路由
这里使用了一个插件 coderwhy
使用这个命令符可以快速搭建出上述页面
3，创建map-menusts文件
然后在你对应想要获取路由表的地方使用map-menusts文件中导出的mapMenusToRoutes函数就可以得到路由表，我的首页叫做mian
参考：
然后菜单组件：
数据返回是这样哒：
最后长这样：
以上就是关于给大家分享一个实现vue右键菜单的组件。全部的内容，包括:给大家分享一个实现vue右键菜单的组件。、如何用js获取下拉菜单中对应选项需要的条目内容、vue从后台获取的数据有html标签通过v-html渲染到页面，然后怎么给这里面的html添加样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）