Vue.js学习 — 微信公众号菜单编辑器(一)

学习里一段时间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学习 — 微信公众号菜单编辑器(一)的更多相关文章

使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
微信公众号菜单openid 点击菜单即可打开并登录微站
现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打 ...
第六篇：微信公众平台开发实战Java版之如何自定义微信公众号菜单
我们来了解一下自定义菜单创建接口: http请求方式:POST(请使用https协议) https://api.weixin.qq.com/cgi-bin/menu/create?access_to ...
vue 仿写微信公众号自定义菜单
先看效果图代码参考 <template> <div>  <el-col :span="24" style=& ...
vux+vuex+vue+Es6开发微信公众号的坑
初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save ...
微信公众号菜单添加小程序，miniprogram，pagepath参数详解，php开发公众号
随着微信小程序功能的开发, 已经可以跟公众号打通了, 主要有两种方式: 1) 在公众号文章中插入小程序 2) 在公众号菜单中添加小程序第一种方式, 子恒老师在前面的课程已经详细介绍过, 今天来讲第二 ...
vue项目使用微信公众号支付总结
微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = d ...
前端通过js获取微信公众号用户的唯一标识符openId
微信公众号程序开发的时候,获取用户信息的时候,需要用到用户的openId,openId是微信用户的唯一标识符,这个操作可以后台实现也可以前端实现,之前项目里是通过后台来获取的,好像用到了一些三方的包, ...
微信公众号Makrdown编辑器，语法你懂吗？
感谢 WeChat Format 源码: https://github.com/lyricat/wechat-format! 其他工具推荐: 微信公众号编辑器 Makrdown: https://md ...

随机推荐

Java项目打包方式分析
[TOC] 概述在项目实践过程中,有个需求需要做一个引擎能执行指定jar包的指定main方法. 起初我们以一个简单的spring-boot项目进行测试,使用spring-boot-maven-plu ...
无所不会的fiddler遇到的尴尬
昨天测试项目时,遇到一个尴尬的事预期功能:点击页面某个按钮会post2个请求实际情况:点了按钮,fiddler抓包没有看到任何请求后来经过他人提醒在PC端浏览器打开此页面,点击按钮后看到页面有j ...
java自动化-juint框架简述
本人使用的是java的juint框架来组织的自动化测试,故我这边需要简单介绍一下juint框架首先,建议自行百度一下juint框架,先有一个大概的了解所谓的接口自动化测试,会对多个接口中每一个接口 ...
关于laravel5.5控制器方法参数依赖注入原理深度解析及问题修复
在laravel5.5中,可以根据控制器方法的参数类型,自动注入一个实例化对象,极大提升了编程的效率,但是相比较与Java的SpringMVC框架,功能还是有所欠缺,使用起来还是不太方便,主要体现在方 ...
用ajax的同步请求解决登陆注册需要根据服务器返回数据判断是否能提交的问题
最近在写www.doubilaile.com的登陆注册.需要用ajax请求服务器判断用户名是否存在,用户名和密码是否匹配,进而提交数据.碰到的问题是异步请求都能成功返回数据,但是该数据不能作为紧接着的 ...
AngularJS学习篇（二十）
AngularJS 包含在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
js 函数声明和函数表达式
在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省 ...
Linux学习（十九）软件安装与卸载(二）更换yum源
一.简介系统自带的源数量有限,而且是国外的源,速度肯定不如国内的.而断网的时候,本地源就可以派得上用处.而RPMForge源是传说中规模最大的一个源.那么接下来我们就来分别配一下本地源,国内源,RP ...
php正则表达式，在抓取内容进行匹配的时候表现不稳定
最近做了一个抓取内容的程序,使用php的正则表达式对抓取的内容进行匹配,当进行大量匹配运算的时候,发现偶尔会出现匹配失败的情况.检查不出任何原因. 匹配失败导致匹配结果为空,最终导致写入数据库失败. ...
问题：编译eshoponcontainers失败，提示error:invalid reference format
环境: visual studio 2017 v15.4.2,docker ce Version 17.06.0-ce-win19 (12801) 参考问题页: https://github.com/ ...