vue开发微信公众号可视化配置菜单

                                         vue开发微信公众号可视化配置菜单

        其实一开始我也是懵逼的，我搞不懂微信公众号后台其实已经很好用了，为什么还需要开发一个模仿微信公众号后台的系统呢？而且微信公众号可以绑定多个运营者，都可以和管理员一样可以通过扫码登录来修改微信菜单配置，唯一想明白的就是如果有什么特殊功能需要开启第三方服务（开发者配置）的时候，才需要开发自定义菜单和自动回复。既然有如此需求，那么我们就来看看vue是如何实现微信公众号的可视化配置菜单的。菜单数据使用mock.js模拟，安装命令是，前端框架采用vue + element

npm install mockjs --save-dev

       一、效果图：

二、采用的是vue-cli 2.0版本，菜单目录结构如图所示：

三、对应文件分别写入

1、views目录下menu的index.vue,我这边使用的是scss,css根据个人需要调整，图片路径也自己更改,所使用的图片地址是：

http://pri3p9w51.bkt.clouddn.com/iphone_backImg.png

<template>
  <div class="public-account-management clearfix">
    <!--左边配置菜单-->
    <div class="left">
      <div class="menu clearfix">
        <div v-for="(item, i) of menu.button" :key="i" class="menu_bottom">
          <!-- 一级菜单 -->
          <div :class="{'active': isActive == i}" class="menu_item" @click="menuFun(i,item)">{
  { item.name }}</div>
          <!--以下为二级菜单-->
          <div v-if="isSubMenuFlag == i" class="submenu">
            <div v-for="(subItem, k) in item.sub_button" :key="k" class="subtitle">
              <div :class="{'active': isSubMenuActive == i + '' + k}" class="menu_subItem" @click="subMenuFun(item, subItem, i, k)">{
  { subItem.name }}</div>
            </div>
            <!--二级菜单加号， 当长度 小于  5 才显示二级菜单的加号  -->
            <div v-if="item.sub_button.length < 5" class="menu_bottom menu_addicon" @click="addSubMenu(item)"><i class="el-icon-plus"></i></div>
          </div>
        </div>
        <!-- 一级菜单加号 -->
        <div v-if="menuKeyLength < 3" class="menu_bottom menu_addicon" @click="addMenu"><i class="el-icon-plus"></i></div>
      </div>
      <el-button class="save_btn" type="success" @click="saveFun">保存并发布至菜单</el-button>
    </div>
    <!--右边配置-->
    <div v-if="!showRightFlag" class="right">
      <div class="configure_page">
        <div class="delete_btn">
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button>
        </div>
        <div>
          <span>菜单名称：</span>
          <el-input v-model="tempObj.name" class="input_width" placeholder="请输入菜单名称" clearable style="margin-top: 12px;"></el-input>
        </div>
        <div>
          <div class="menu_content">
            <span>菜单内容：</span>
            <el-radio-group v-model="tempObj.type">
              <el-radio :label="'media_id'">发送素材</el-radio>
              <el-radio :label="'view'">跳转链接</el-radio>
              <el-radio :label="'click'">发送关键词</el-radio>
              <el-radio :label=