javascript - 求大神分享一个通过vue.js实现的点击鼠标右键,生产菜单列表的demo或思路,谢谢~

Question

1.使用到vue.js;
2.考虑到dom操作,可以引入jquery;
3.可以考虑结合jquery插件,比如bootstrap-menu实现该效果;
4.需要有正常的右键展开菜单,再点击菜单外区域能隐藏;
5.需要与其他vue语句结合使用无冲突,比如v-for等;
6.如果有现成的或值得参考的,也可以分享下地址.

另外我再阐述下我在实现一个类似需求中遇到几个问题:
1.用vue渲染出列表不是问题很正常,但不太清楚为什么我对生vue列表渲染的li元素用jquery选择器得到的返回结果的length为0,明明页面上都显示有3个了;
2.我尝试在vue的生命周期created,ready等console.log($('#testList li')),结果created的返回有结果,ready的没有,感觉很神奇,是不是我对vue的生命周期理解不对?不是ready的时候已经写进了document吗?
3.无论console.log的结果如何,当我结合bootstrap-menu这个插件,比如这么写:
//js代码:

var commentListVue = new Vue({
    el: '#historyNewsList',
    data: {
        items: [],  //这个是有值的,赋值的那部分代码就不贴了
        theme: '',
        newItems:[] //这个是有值的,赋值的那部分代码就不贴了
    },
    ready: function () {
        console.log( $('#historyNewsList li.live'));
        $('#historyNewsList li.live').contextmenu({
            target: '#liveForCAreaRightMenu',
            onItem: function (context, e) {

            }
        });
    }
});

//html代码:

                    <li class="list-item p-b-10 p-t-10 live context" v-for="item in items" data-type="{{ item.type }}"
                        v-if="item.status=='1' && item.type=='1'" data-contentid="{{item.content_id}}" v-cloak>
                        {{{ item.tag=='0'?'':item.tag }}}
                        <p class="inline-block p-l-10 m-0" style="max-width: 85%">{{ item.content }}</p>
                        <span class="pull-right ft-12">{{ item.update_datetime }}</span>
                    </li>

//contextmenu

                <p class="a-live-content-option" id="liveForCAreaRightMenu">
                    <button class="btn btn-sm btn-fillet" id="rightMenuQuote">引用</button>
                    <button class="btn btn-sm btn-fillet" id="liveRightMenuStick">置顶</button>
                </p>

如上,contextmenu方法并未生效,感觉没有调用过,why?如果需要结合vue,我该怎么写,才能让列表渲染生产的每个li能通过右键生产菜单?

Answer 1

多谢各位的回复,目前这个问题已经解决了,说一下我的解决方法:
首先,要知道下vue的主旨思想,他是一个MVVM框架,MVVM的思路是VM驱动V，所以不是将重心放在DOM节点（意味着动词，这是个命令式UI）的操作上，而是一组DOM节点它是否存在于那个地方，由一个VM属性来确定（意味着声明式编程，话说这个是不是应该叫谓词）。
然后,我的解决方法是,使用了$nextTick(function () {}),说明如下:

另外,vuejs确实应该是自己的一套,再次引入jq去操作,有点违背它的本意,只是项目其他地方用到jq的地方太大,没法一下换掉吧

Answer 2

之前写的东西里实现过 http://demo.ruosen.io/desktop...。

一个层在UI层之上，显示菜单的。
写一套菜单的封装，show方法，hide方法，设定位置，设定内容。
用一套事件系统，在事件里调用菜单的封装。
鼠标右键的事件里触发上面菜单show的事件。左键在桌面的事件触发hide。

Answer 3

这是考虑什么呢。用vuejs模板直接都帮你弄好了。建议你用一整套的VUE的东西，不要混着用。

Answer 4

举个例子，自己写吧。
http://www.jianshu.com/p/8c35...

---

大兄弟，你的jq选择器是这个

 $('#historyCommentList li.comment')

可是我没看到你的模板里面的li上有.comment的className，我想这就是你获取为0的原因吧

---

ready
类型： Function
详细：
在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。

ready的时候是会加入到document，但是却不一定当它加入到文档的时候就有Li那些值，同时注意他们的触发条件。

我觉得你这个应该写指令。