guns -13 layui的layim模块的右键菜单扩展模块

2021-03-19 本文已影响0人牵手生活

效果

效果图

一、添加contextMenu组件

下载contextMenu组件，点击这里下载资源

image.png

二、common.js中为contextMenu导入组件到layui


// 以下代码是配置layui扩展模块的目录，每个页面都需要引入
layui.config({
    version: Feng.version,
    base: Feng.ctxPath + '/assets/common/module/'
}).extend({
    ....
    dropdown: 'dropdown/dropdown',
    contextMenu: 'contextMenu/contextMenu',
    ...

}).use(['layer', 'admin'], function () {

三、html引入contextMenu.css

<link rel="stylesheet" href="/assets/common/module/contextMenu/contextMenu.css?v=20200318"/>

image.png

四、js总添加配置

//定义扩展
layui.define(['jquery','contextMenu'], function (exports) {
    var contextMenu = layui.contextMenu;
    var $ = layui.jquery;
    var ext = {
        init : function(){//定义右键操作
            $(".layim-list-friend >li > ul > li").contextMenu({
                width: 140, // width
                itemHeight: 30, // 菜单项height
                bgColor: "#fff", // 背景颜色
                color: "#333", // 字体颜色
                fontSize: 15, // 字体大小
                hoverBgColor: "#009bdd", // hover背景颜色
                hoverColor: "#fff", // hover背景颜色
                target: function(ele) { // 当前元素
                    $(".ul-context-menu").attr("data-id",ele[0].id);
                    $(".ul-context-menu").attr("data-name",ele.find("span").html());
                    $(".ul-context-menu").attr("data-img",ele.find("img").attr('src'));
                },
                menu: [
                    { // 菜单项
                        text: "发送消息",
                        icon: "",
                        callback: function(ele) {
                            var othis = ele.parent(),
                                friend_id = othis[0].dataset.id.replace(/^layim-friend/g, ''),
                                friend_name = othis[0].dataset.name,
                                friend_avatar = othis[0].dataset.img;
                            alert('发送消息 昵称='+ele.parent()[0].getAttribute('data-name') +' 缩略图='+ele.parent()[0].getAttribute('data-img'));

                        }
                    },
                    {
                        text: "查看资料",
                        icon: "",
                        callback: function(ele) {
                            alert('查看资料 昵称='+ele.parent()[0].getAttribute('data-name') +' 缩略图='+ele.parent()[0].getAttribute('data-img'));

                        }
                    },
                    {
                        text: "聊天记录",
                        icon: "",
                        callback: function(ele) {
                            var othis = ele.parent(),
                                friend_id = othis[0].dataset.id.replace(/^layim-friend/g, ''),
                                friend_name = othis[0].dataset.name;
                            //ele.parent()[0] ;  //其实是 --对应一个 <ul联系人的>
                            alert('聊天记录 昵称='+ele.parent()[0].getAttribute('data-name') +' 缩略图='+ele.parent()[0].getAttribute('data-img'));


                        }
                    }
                ]
            });
        }
    }
    exports('ext', ext);
});

五、最后初始化右键菜单的实例


layui.use(['layim', 'socket'], function(layim) {
  $ = layui.jquery

 ...
  layim.on('ready', function(){
    layui.ext.init(); //更新右键点击事件
  });
  ...
  //下面是 layim 处理消息的代码
});