学习里一段时间Vue.js，于是想尝试着做一个像微信平台里那样的菜单编辑器，在这里分享下

具体样式代码查看项目github

创建一个vue实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>

</head>

<body>

    <div class="content" style="width:900px;margin:0 auto;">

        <!-- vue实例挂载的DOM元素 -->

        <div id="app-menu">

            <!-- 菜单预览界面 -->

            <div class="weixin-preview"></div>

            <!-- 菜单编辑界面 -->

            <div class="weixin-menu-detail"></div>

        </div>

    </div>

    <script>

        var app = new Vue({

            el: '#app-menu',//挂载到对应的DOM元素

            data: {

                weixinTitle: 'Vue.js公众号菜单',

                //菜单对象

                menu: {

                    "button": [

                        {

                            "name": "主菜单1",

                            "sub_button": []

                        },

                        {

                            "name": "主菜单2",

                            "sub_button": []

                        },

                        {

                            "name": "主菜单3",

                            "sub_button": [

                            {

                                "name": "子菜单1"

                            }]

                        }]

                },

                selectedMenuIndex:'',//当前选中菜单索引

                selectedSubMenuIndex:'',//当前选中子菜单索引

            },

            methods: {

            }

        })

    </script>

</body>

</html>

将菜单数据渲染到模版上

这里使用v-if和v-for将数据渲染到模版上，最多会有3个主菜单以及每个主菜单最多会有5个子菜单。

<div class="weixin-preview">

    <div class="weixin-hd">

        <div class="weixin-title">{{weixinTitle}}</div>

    </div>

    <div class="weixin-bd">

        <ul class="weixin-menu">

            <!-- 这里使用v-for开始循环主菜单 -->

            <li v-for="(btn,i) in menu.button" class="menu-item">

                <div class="menu-item-title">

                    <span>{{ btn.name }}</span>

                </div>

                <ul class="weixin-sub-menu">

                    <!-- 这里使用v-for开始循环主菜单下的子菜单 -->

                    <li v-for="(sub,i2) in btn.sub_button" class="menu-sub-item">

                        <div class="menu-item-title">

                            <span>{{sub.name}}</span>

                        </div>

                    </li>

                    <!-- 这里使用v-if 判断子菜单小于5个，则添加按钮来添加子菜单 -->

                    <li v-if="btn.sub_button.length<5" class="menu-sub-item">

                        <div class="menu-item-title">

                            <i class="icon14_menu_add"></i>

                        </div>

                    </li>

                </ul>

            </li>

            <!-- 这里使用v-if 判断主菜单小于3个，则添加按钮来添加主菜单 -->

            <li class="menu-item" v-if="menu.button.length<3"> <i class="icon14_menu_add"></i></li>

        </ul>

    </div>

</div>

给vue实例添加方法

在vue实例中给methods对象中添加我们自定义的方法

methods: {

    //选中主菜单

    selectedMenu:function (i) {

        this.selectedSubMenuIndex = ''

        this.selectedMenuIndex = i

    },

    //选中子菜单

    selectedSubMenu:function (i) {

        this.selectedSubMenuIndex = i

    },

    //选中菜单级别

    selectedMenuLevel: function () {

        if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex === '') {

            //主菜单

            return 1;

        } else if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex !== '') {

            //子菜单

            return 2;

        } else {

            //未选中任何菜单

            return 0;

        }

    },

    //添加菜单

    //参数level为菜单级别，1为主菜单、2为子菜单

    addMenu:function (level) {

        if (level == 1 && this.menu.button.length < 3) {

            this.menu.button.push({"name": "菜单名称",

                "sub_button": []

            })

            this.selectedMenuIndex = this.menu.button.length - 1

            this.selectedSubMenuIndex = ''

        }

        if (level == 2 && this.menu.button[this.selectedMenuIndex].sub_button.length < 5) {

            this.menu.button[this.selectedMenuIndex].sub_button.push({

                "name": "子菜单名称"

            })

            this.selectedSubMenuIndex = this.menu.button[this.selectedMenuIndex].sub_button.length - 1

        }

    }

}

给菜单绑定方法

当点击菜单触发selectedMenu方法，点击添加按钮触发添加addMenu方法。使用v-on来监听事件，它的缩写是@

监听点击事件@click ，为了防止子菜单点击事件冒泡的主菜单，则使用.stop事件修饰符来阻止冒泡@click.stop

使用v-bind:class来添加切换菜单选中时的class。:class为缩写

<ul class="weixin-menu" id="weixin-menu" >

    <!--  判断如果selectedMenuIndex是当前点击的主菜单索引则添加current样式  -->

    <li v-for="(btn,i) in menu.button" class="menu-item" :class="{current:selectedMenuIndex===i&&selectedMenuLevel()==1}" @click="selectedMenu(i)">

        <div class="menu-item-title">

            <span>{{ btn.name }}</span>

       </div>

        <!--  v-show来切换是否显示 这里如果选中了主菜单则子菜单弹出  -->

        <ul class="weixin-sub-menu" v-show="selectedMenuIndex===i">

            <li v-for="(sub,i2) in btn.sub_button" class="menu-sub-item" :class="{current:selectedSubMenuIndex===i2&&selectedMenuLevel()==2}"  @click.stop="selectedSubMenu(i2)">

                <div class="menu-item-title">

                    <span>{{sub.name}}</span>

                </div>

            </li>

            <li v-if="btn.sub_button.length<5" class="menu-sub-item" @click.stop="addMenu(2)">

                 <div class="menu-item-title">

                        <i class="icon14_menu_add"></i>

                 </div>

            </li>

        </ul>

    </li>

    <li class="menu-item" v-if="menu.button.length<3" @click="addMenu(1)">

        <i class="icon14_menu_add"></i>

    </li>

</ul>

Vue.js学习 — 微信公众号菜单编辑器(一)的更多相关文章

  1. 使用NW.js封装微信公众号菜单编辑器为桌面应用

    开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...

  2. 微信公众号菜单openid 点击菜单即可打开并登录微站

    现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打 ...

  3. 第六篇 ：微信公众平台开发实战Java版之如何自定义微信公众号菜单

    我们来了解一下 自定义菜单创建接口: http请求方式:POST(请使用https协议) https://api.weixin.qq.com/cgi-bin/menu/create?access_to ...

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

    先看效果图 代码参考 <template> <div> <!-- 公众号设置 --> <el-col :span="24" style=& ...

  5. vux+vuex+vue+Es6开发微信公众号的坑

    初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save ...

  6. 微信公众号菜单添加小程序，miniprogram，pagepath参数详解，php开发公众号

    随着微信小程序功能的开发, 已经可以跟公众号打通了, 主要有两种方式: 1) 在公众号文章中插入小程序 2) 在公众号菜单中添加小程序 第一种方式, 子恒老师在前面的课程已经详细介绍过, 今天来讲第二 ...

  7. vue项目使用微信公众号支付总结

    微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = d ...

  8. 前端通过js获取微信公众号用户的唯一标识符openId

    微信公众号程序开发的时候,获取用户信息的时候,需要用到用户的openId,openId是微信用户的唯一标识符,这个操作可以后台实现也可以前端实现,之前项目里是通过后台来获取的,好像用到了一些三方的包, ...

  9. 微信公众号Makrdown编辑器，语法你懂吗？

    感谢 WeChat Format 源码: https://github.com/lyricat/wechat-format! 其他工具推荐: 微信公众号编辑器 Makrdown: https://md ...

随机推荐

  1. 读书笔记-你不知道的JS中-promise(3)

    坑坑坑 关于术语:决议.完成以及拒绝. 首先观察Promise(..)构造器: var p = new Promise(function(x, y) { //x() 用于完成 //y() 用于拒绝 } ...

  2. octave中的一些基本操作

    1.矩阵的表示:v = [1 2 2]  %表示1行3列的矩阵 v = [1; 2; 2] %表示3行1列的矩阵 v = [1 2; 2 3; 4 5] %3*2矩阵 size(v) % 求v的行与列 ...

  3. js判断是否使用的是微信浏览器

    代码如下: function is_weixin() { var ua = navigator.userAgent.toLowerCase(); return ua.match(/MicroMesse ...

  4. Maximum Clique

    Maximum Clique Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...

  5. linux下socket编程实例

    linux下socket编程实例一.基本socket函数Linux系统是通过提供套接字(socket)来进行网络编程的.网络的socket数据传输是一种特殊的I/O,socket也是一种文件描述符.s ...

  6. Linux 文件系统模型

    声明:本文仅限于 cnblogs 发布,其他第三方网站均为盗版,原文地址:Linux 文件系统模型 在 Linux 环境下有过一些经历的同学可能都会遇到一个问题,这个问题就是往机器上插入 U盘 或者其 ...

  7. 如何在RHEL7上搭建Samba服务实现Windows与Linux之间的文件共享

    如何在RHEL7上搭建Samba服务实现Windows与Linux之间的文件共享 实现环境:VMware workstations.RHEL7.0 第一步:配置网卡IP及yum软件仓库 命令:vim ...

  8. 你不得不看的Python机器学习工具

    IEEE Spectrum排行榜第一,Skill UP排名第一的开发工具,Stack Overflow年度调查中程序员最感兴趣的选择,Stack Overflow 6月份访问量最多的编程语言..... ...

  9. 细谈昆明SEO市场

    就在前几天,以前的同事跟我说,现在昆明SEO市场真的是烂到不行,每家公司在招SEO这个方向的时候,给到的工资都很低,接着这几天闲来无事,就在某个招聘平台上注册了个账号,投了将近100份简历,专门去面试 ...

  10. percona_xtrabackup

    原理 percona xtrabackup备份过程主要分为以下几点: 1.xtrabackup在启动时会记住LSN(log sequence number),然后复制所有的数据文件 2.xtrabac ...