vue实现公众号自定义菜单

困难点：1.选中状态；2.布局，3.内容类型判断 ，4保存后数据的筛选，5数据结构的调整

1.菜单排序用Awe-dnd插件，地址：https://github.com/hilongjw/vue-dragging  2.预览用https://www.jq22.com/webqd6514，自己改进一些 3.ant-design-vue

2.ui设计

<template>
  <div>
    <!-- <a-page-header title="自定义菜单" /> -->
    <div class="mian_box">
      <div class="mian_box_preview">
        <div class="mobile_menu_left_box">
          <div class="mobile_menu_left_box_header">自定义菜单公众号</div>
          <div class="mobile_menu_left_box_comtent">
            <ul class="mobile_menu_left_box_list ui-sortable ui-sortable-disabled">
              <li
                class="mobile_menu_li"
                :class="
                  list.button.length === 0
                    ? 'mobile_menu_li1'
                    : list.button.length === 1
                    ? 'mobile_menu_li2'
                    : 'mobile_menu_li3'
                "
                @click="footer_btn(index, -1, item)"
                v-for="(item, index) in list.button"
                v-dragging="{
                  item: sortShow ? item : '',
                  list: sortShow ? list.button : [],
                  group: 'item',
                  otherData: list.button
                }"
                :key="index"
              >
                <a
                  href="javascript:void(0);"
                  class="mobile_menu_li_a"
                  :class="'menu_list_item' + index + '_' + '-1' === 'menu_list_item' + select ? 'selected' : ''"
                >
                  <a-icon
                    type="unordered-list"
                    v-if="item.sub_button && item.sub_button.length > 0"
                    :style="{
                      fontSize: '10px',
                      'vertical-align': 'middle',
                      display: 'inline-block',
                      'margin-top': '-3px',
                      'margin-right': '3px'
                    }"
                  />
                  <span>{
  { item.name }}</span>
                </a>
                <div class="sub_menu_item" v-if="index === showIndex">
                  <ul class="sub_menu_item_ul" @mousedown.stop @touchstart.stop @touchmove.stop>
                    <li
                      :class="'menu_list_item' + index + '_' + i === 'menu_list_item' + select ? 'sub_selected' : ''"
                      class="sub_menu_item_ul_li"
                      @click.stop="footer_btn(index, i, sub)"
                      v-for="(sub, i) in item.sub_button"
                      v-dragging="{
                        item: sortShow ? sub : '',
                        list: sortShow ? item.sub_button : [],
                        group: 'sub',
                        otherData: list.button
                      }"
                      :key="i"
                    >
                      <a class="sub_menu_item_ul_li_a" href="javascript:void(0);">
                        <span class="sub_menu_item_ul_li_span">{
  { sub.name }}</span>
                      </a>
                    </li>
                    <li
                      class="sub_menu_item_li"
                      v-if="(index === showIndex && !item.sub_button) || item.sub_button.length < 5"
                    >
                      <a class="sub_menu_item_li_before" @click.stop="createSubs(index)">
                        <a-icon type="plus" :style="{ fontSize: '20px', color: 'rgb(154, 154, 154)' }" />
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li
                v-if="list.button.length < 3"
                @click="footer_create"
                class="mobile_menu_li"
                :class="
                  list.button.length === 0
                    ? 'mobile_menu_li1'
                    : list.button.length === 1
                    ? 'mobile_menu_li2'
                    : 'mobile_menu_li3'
                "
              >
                <a href="javascript:void(0);" class="mobile_menu_li_a">
                  <a-icon type="plus" :style="{ fontSize: '20px', color: 'rgb(154, 154, 154)' }" />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="mian_box_form_area"
        :class="chooseList.length === 0 ? '' : 'mian_box_form_area_after'"
        v-show="!sortShow"
      >
        <div class="mian_box_form_area_tips tips_global" v-if="chooseList.length === 0">点击左侧菜单进行编辑操作</div>
        <div class="mian_box_form_area_from_edit" v-else>
          <div class="from_edit_inner">
            <div class="from_edit_inner_title">
              <h4 class="title_size">{
  { chooseList.name }}</h4>
              <div class="title_delete" @click="delete_menu">删除{
  { name }}菜单</div>
            </div>
            <div class="from_edit_inner_mian">
              <div class="from_edit_inner_tips" v-if="!chooseList.type">已添加子菜单，仅可设置菜单名称。</div>
              <div class="from_edit_inner_mian_group">
                <label class="from_edit_inner_label"
                  ><strong>{
  { name }}菜单名称</strong>
                </label>
                <div class="from_edit_inner_input">
                  <span class="edit_input_width">
                    <a-input :placeholder="name + '菜单名称'" v-model="chooseList.name" style="width: 300px" />
                  </span>
                  <p class="edit_input_tips">仅支持中英文和数字，字数不超过8个汉字或16个字母</p>
                </div>
              </div>
              <div class="from_edit_inner_mian_group" v-if="chooseList.type">
                <label class="from_edit_inner_label" style="line-height: 56px"
                  ><strong>{
  { name }}菜单内容</strong></label
                >
                <div class="from_edit_inner_input">
                  <div class="edit_choose_width">
                    <a-tabs type="line" @change="tabChange" v-model="activekey">
                      <a-tab-pane key="1">
                        <a-radio slot="tab" :checked="msgchecked" @focus="focusMSG"> 发送消息 </a-radio>
                        <div class="card-container">
                          <a-tabs type="card">
                            <a-tab-pane key="1">
                              <span slot="tab">
                                <a-icon type="laptop" />
                                图文消息
                              </span>
                              <div class="msgInser">
                                <div class="material_list" v-if="itemlist.length !== 0">
                                  <ul class="material_list_ul">
                                    <li class="material_list_ul_li width33">
                                      <div class="material_list_ul_li_a">
                                        <div class="material_time">
                                          <h4>
                                            <span class="material_time_time">更新于</span
                                            ><span>{
  { itemlist.updateTime }}</span>
                                            <span class="material_time_delete" @click="delete_tap">删除</span>
                                          </h4>
                                        </div>
                                        <!-- <div class="material_img">
                                            <img slot="cover" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                                            <div class="material_img_alt">
                                              嘘嘘阿斯顿撒旦阿斯顿南京卡道具卡洛斯的哈市的，加上快递哈就是扩大阿斯顿黄金卡上的班
                                            </div>
                                          </div> -->
                                        <