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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
浅谈js中对象的使用
Aug 11 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
基于node.js实现微信支付退款功能
Dec 19 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
JavaScript中this用法学习笔记
Mar 17 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_merge合并数组的区别深入分析
2013/06/03 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
python中的随机函数random的用法示例
2018/01/27 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python定义一个函数的方法
2020/06/15 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
高中生期末评语
2014/01/28 职场文书
物业品质提升方案
2014/06/08 职场文书
校园开放日新闻稿
2015/07/17 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
MySQL大小写敏感的注意事项
2021/05/24 MySQL