仿微信公众号后台管理-自定义菜单

最近在做后台管理界面 这是自定义菜单的页面笔记 (也不知道我的思路对不对)

点击菜单出现 创建第一个菜单,并在该菜单上方出现可添加子菜单的添加按钮, 并展示修改该菜单的相关内容 右侧展示有两个 一个关于子菜单的 一个关于菜单的

当菜单上方没有子菜单时候 直接删除菜单 恢复默认样式 当有子菜单时候 提醒用户不能删除 

当选中子菜单时候 右侧出现子菜单信息界面 点击删除子菜单 对应选中子菜单移除 

布局上 是每个菜单又有一个自己对应的可添加子菜单的div 方便后台管理和使用

点击菜单排序的时候 子菜单出现向上箭头 点击对应子菜单置顶

 jq 排序

$('.zicaidan em.arrow').toggle().click(function(){
            $(this).parent().parent().prepend($(this).parent());
        })

 vue 排序 

    upSort(index, menuIndex) {
      var menuObj = this.menuList[index].contentMenuList[menuIndex];
      this.menuList[index].contentMenuList.splice(menuIndex, 1);
      this.menuList[index].contentMenuList.push(menuObj);
    },

  

2019/05/05

最近把这个整理了一下,放到了github上 有需要的 自己download一下吧

jq    版本  https://github.com/GoTing/zdyi.git

vue 版本 https://github.com/GoTing/custom-vue.git

有一些不足的地方,请大家指出来哈

原文地址:https://www.cnblogs.com/GoTing/p/6739138.html