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分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP insert语法详解
2008/06/07 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
快速了解python leveldb
2018/01/18 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
python之语音识别speech模块
2020/09/09 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
会计员岗位职责
2014/03/15 职场文书
项目合作协议书
2014/09/23 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
法律进社区活动总结
2015/05/07 职场文书
党员读书活动心得体会
2016/01/14 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
Vue如何清空对象
2022/03/03 Vue.js