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 相关文章推荐
jquery 插件开发备注
Aug 27 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python链表类中获取元素实例方法
2021/02/23 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
实习生自荐信范文
2013/11/13 职场文书
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
大学开学计划书
2014/04/30 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
学前班语言教学计划
2015/01/20 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
坎儿井导游词
2015/02/09 职场文书
工程部部长岗位职责
2015/02/12 职场文书
元宵节寄语大全
2015/02/27 职场文书
书法社团活动总结
2015/05/07 职场文书
生死抉择观后感
2015/06/09 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书