Vue.js 实现微信公众号菜单编辑器功能(一)


Posted in Javascript onMay 08, 2018

学习一段时间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>

Vue.js 实现微信公众号菜单编辑器功能(一)

将菜单数据渲染到模版上

这里使用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.js 实现微信公众号菜单编辑器功能(一)

给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 实现微信公众号菜单编辑器功能(一)

下篇给大家介绍  Vue.js 实现微信公众号菜单编辑器功能(二)    

总结

以上所述是小编给大家介绍的Vue.js 实现微信公众号菜单编辑器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
PHP守护进程实例
Mar 06 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
浅谈React 服务器端渲染的使用
May 08 #Javascript
vue.js做一个简单的编辑菜谱功能
May 08 #Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 #Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 #Javascript
webstorm添加*.vue文件支持
May 08 #Javascript
浅谈vue项目如何打包扔向服务器
May 08 #Javascript
Javascript实现购物车功能的详细代码
May 08 #Javascript
You might like
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python杀死一个线程的方法
2015/09/06 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
详解anaconda安装步骤
2020/11/23 Python
国旗下讲话演讲稿
2014/05/08 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
2014年维修工作总结
2014/11/22 职场文书
导游词之南京中山陵
2019/11/27 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers