vue 仿写微信公众号自定义菜单

<template>
    <div>
        <!-- 公众号设置 -->
        <el-col :span="24" style=" margin-top: 10px;">
            <h2 style="font-weight: 300; margin-left: 20px; font-size: 22px;">公众号设置</h2>
            <!-- <el-col :span="12" :offset="6">
                <div class="grid-content bg-purple warning">
                    <p>
                        <i class="el-icon-warning tips"></i>温馨提示:
                        <span class="on">立即授权</span>
                    </p>
                    <p>微信公众号提现需要特约商户签约，材料交给我们代为提交。签约费用500元</p>
                </div>
            </el-col> -->
            <el-col :span="24" style=" margin-top: 30px;">
                <el-col :span="5" class="left">
                    <img class="top" :src="top" />
                    <img class="bottom" :src="bottom" />
                    <div style="background: #F4F5F9; min-height: 438px; position: absolute;
                        top: 63px; width: 320px;  ">
                    </div>
                    <div class="textbot">
                        <div class="li" v-for="(item,indx) in list" :key="indx" >
                            <div v-if="activeClass == indx">
                                <div class="add" @click="add(indx)"><i class="el-icon-plus"></i></div>
                                <div class="tianjia">
                                    <div class="addadd" v-for="(item,index) in item.list" :key="index" 
                                    :class="addindex == index  ? 'active':''" @click="gettem(item,index)">{{item.name}}</div>
                                </div>
                            </div>
                            <div class="text" :class="activeClass == indx ? 'active':''" @click="getItem(item,indx)">{{item.name}}</div>
                        </div>
                        <div class="li" v-if="list.length < 3">
                            <div class="text" @click="addtext"><i class="el-icon-plus"></i></div>
                        </div>
                    </div>
                </el-col>

                <el-col :span="15" style=" padding-left: 20px;">
                    <el-card class="box-card right">
                        <div slot="header" class="clearfix">
                            <span>{{input}}</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="delet">删除子菜单</el-button>
                        </div>
                        <div style="display: flex;">
                            <label style="line-height: 34px; width:80px;">菜单名称</label>
                            <el-input v-model="input" placeholder="请输入内容" style="width:70%;" ></el-input>
                        </div>
                        <p style="color: #9A8D8D;margin-left: 80px;">仅支持中英文和数字，字数不超过4个汉字或8个字母</p>
                        <div style="display: flex;">
                            <label style="line-height: 34px; width:80px;">菜单内容</label>
                            <el-radio-group v-model="radio" style="line-height: 45px;">
                                <el-radio :label="1">平台模板</el-radio>
                                <el-radio :label="2">跳转的网页</el-radio>
                            </el-radio-group>
                        </div>
                        <div style="background: #fff;padding:10px 0;" v-if="radio == 1">
                            <el-radio-group v-model="radiobottom" style="padding:0 30px;">
                                <p style="margin: 8px 0;" v-for="(item,index) in listlist" :key="index">
                                    <el-radio :label="index">{{item.name}}{{item.http}}</el-radio>
                                </p>
                            </el-radio-group>
                        </div>
                        <div style="background: #fff;padding:10px 0;" v-if="radio == 2">
                            <p style="color: #9A8D8D;margin-left: 30px;">订阅者点击该子菜单会跳到以下链接</p>
                            <div style="display: flex; padding:0 30px;">
                                <label style="line-height: 34px; width:65px;">页面地址</label>
                                <el-input v-model="inputhttp" placeholder="请输入内容" style="width:70%;"></el-input>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="24">
                    <el-button type="primary" style="display: block;margin: 10px auto;">保存并发布</el-button>
                </el-col>
            </el-col>
        </el-col>
    </div>
</template>
<script>
export default {
  data () {
    return {
      top: '../static/img/top.png',
      bottom: '../static/img/bottom.png',
      activeClass: 0,
      addindex: -1,
      input: '',
      inputhttp: '',
      radio: 1,
      radiobottom: 0,
      shu: 6,
      id: 1,

      list: [
        { name: '菜单一', http: 'http://localhost:8001', id: 1, list: [{ 'name': '我是1', http: 'http://localhost:8011', id: 4 }] },
        { name: '菜单二', http: 'http://localhost:8002', id: 2, list: [{ 'name': '我是2', http: 'http://localhost:8021', id: 5 }] },
        { name: '菜单三', http: 'http://localhost:8003', id: 3, list: [{ 'name': '我是3', http: 'http://localhost:8031', id: 6 }] }
      ],
      listlist: []
    }
  },
  mounted () {
    this.rech()
    this.input = this.list[0].name
    this.inputhttp = this.list[0].http
  },
  watch: {
     // 如果 `input` 发生改变，这个函数就会运行
    input: function () {
      for (var i = 0; i < this.list.length; i++) {
        for (var j = 0; j < this.list[i].list.length; j++) {
          if (this.list[i].list[j].id === this.id) {
            this.list[i].list[j].name = this.input
          }
        }
        if (this.list[i].id === this.id) {
          this.list[i].name = this.input
        }
      }
      this.rech()
    // 限制名字个数
      var temp = 0
      for (var k = 0; k < this.input.length; k++) {
        if (/[\u4e00-\u9fa5]/.test(this.input[k])) {
          temp += 2
        } else {
          temp++
        }
        if (temp > 8) {
          this.input = this.input.substr(0, k)
        }
      }
    },
    inputhttp: function () {
      for (var i = 0; i < this.list.length; i++) {
        for (var j = 0; j < this.list[i].list.length; j++) {
          if (this.list[i].list[j].id === this.id) {
            this.list[i].list[j].http = this.inputhttp
          }
        }
        if (this.list[i].id === this.id) {
          this.list[i].http = this.inputhttp
        }
      }
      this.rech()
    }
  },
  methods: {
    //   父元素
    getItem (item, index) {
      this.addindex = -1
      this.activeClass = index  // 把当前点击元素的index，赋值给activeClass
      this.input = item.name
      this.inputhttp = item.http
      this.id = item.id
      this.rech()
    },
    // 子元素
    gettem (item, index) {
      this.addindex = index
      console.log(item)
      this.input = item.name
      this.inputhttp = item.http
      this.id = item.id
      this.rech()
    },
    // 增加
    add (index) {
      this.shu++
      this.list[index].list.push({
        'name': '子菜单', http: 'http://localhost:8000', id: this.shu
      })
      this.rech()
    },
    addtext () {
      this.shu++
      this.list.push({
        'name': '菜单', http: 'http://localhost:8000', id: this.shu, list: []
      })
      this.rech()
    },
    // 删除
    delet () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (var i = 0; i < this.list.length; i++) {
          for (var j = 0; j < this.list[i].list.length; j++) {
            if (this.list[i].list[j].id === this.id) {
              this.list[i].list.splice(j, 1)
              this.addindex = -1
              this.rech()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          }
          if (this.list[i].id === this.id) {
            this.list.splice(i, 1)
            this.activeClass = -1
            this.rech()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    rech () {
      this.listlist = []
      this.list.forEach(item => {
        this.listlist.push({
          name: item.name,
          http: item.http
        })
        item.list.forEach(item => {
          this.listlist.push({
            name: item.name,
            http: item.http
          })
        })
      })
      for (var i = 0; i < this.listlist.length; i++) {
        if (this.listlist[i].name === this.input) {
          this.radiobottom = i
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.warning {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 5px 20px;
}

.on {
    text-align: right;
    float: right;
    color: #1890ff;
}

.tips {
    color: #1890ff;
    font-size: 20px;
    margin-right: 10px;
}

.left {
    min-width: 390px;
    min-height: 550px;
    position: relative;
    padding-left: 40px;
}

.top {
    position: absolute;
    top: 0px;
}

.bottom {
    position: absolute;
    bottom: 0px;
}

.textbot {
    position: absolute;
    bottom: 0px;
    left: 82px;
    width: 100%;
}

.active {
    border: 1px solid #44B549 !important;
    color: #44B549 !important;
}

.li {
    float: left;
    width: 93px;
    line-height: 48px;
    border: 1px solid #E7E7EB;
    background: #FAFAFA;
    text-align: center;
    cursor: pointer;
    color: #999;
    position: relative;
}
.text{
    height: 50px;
}
.text:hover {
    color: #000;
}

.add {
    position: absolute;
    bottom: 60px;
    width: 100%;
    line-height: 48px;
    border: 1px solid #E7E7EB;
    background: #FAFAFA;
}

.tianjia {
    position: absolute;
    bottom: 110px;
    width: 100%;
    line-height: 48px;
    background: #FAFAFA;
}

.addadd {
    width: 100%;
    line-height: 48px;
    border: 1px solid #E7E7EB;
    background: #FAFAFA;
    height: 48px;
}

.right {
    background: #F4F5F9;
    min-height: 550px;
   
}
</style>