How to use Vue.js to implement the WeChat public account menu editor (detailed idea)

This time I will show you how to use Vue.js to implement the WeChat public account menu editor (detailed idea), what are the precautions for using Vue.js to implement the WeChat public account menu editor, the following is a practical case, let's go together take a look.

I have been studying Vue.js for a while, so I want to try to make a menu editor like the one on the WeChat platform. I will share it here

Check the project github for the specific style code

Create a vue instance

nbsp;html>


 <meta>
 <title></title>
 <script></script>


 <p>
 <!-- vue实例挂载的DOM元素 -->
 </p><p>
 <!-- 菜单预览界面 -->
 </p><p></p>
 <!-- 菜单编辑界面 -->
 <p></p>
 
 
 <script>
 var app = new Vue({
 el: &#39;#app-menu&#39;,//挂载到对应的DOM元素
 data: {
 weixinTitle: &#39;Vue.js公众号菜单&#39;,
 //菜单对象
 menu: {
  "button": [
  {
  "name": "主菜单1",
  "sub_button": []
  },
  {
  "name": "主菜单2",
  "sub_button": []
  },
  {
  "name": "主菜单3",
  "sub_button": [
  {
  "name": "子菜单1"
  }]
  }]
 },
 selectedMenuIndex:&#39;&#39;,//当前选中菜单索引
 selectedSubMenuIndex:&#39;&#39;,//当前选中子菜单索引
 },
 methods: {
 }
 })
 </script>

Render the menu data to On the template

Here v-if and v-for are used to render data to the template. There will be up to 3 main menus and each main menu can have up to 5 submenus.

<p>
 </p><p>
 </p><p>{{weixinTitle}}</p>
 
 <p>
 </p>

   
•  

    {{ btn.name }}  

   
       
  •   

      {{sub.name}}   

      
       
  •   

         

      
   
   
   
•  
 

 

Add methods to the vue instance

Add our custom methods to the methods object in the vue instance

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 <p style="text-align: left;"><span style="color: #ff0000"><strong>Bind the method to the menu</strong></span></p><p style="text-align: left;">When the menu is clicked, the selectedMenu method is triggered, and the add button is clicked to trigger the addMenu method. Use v-on to listen to the <a href="http://www.php.cn/js/js-jspopular-guide-event.html" target="_blank"> event </a>, its abbreviation is @</p><p style="text-align: left;"> to listen to the click event @click. In order to prevent the submenu click event from bubbling up the main menu, use the .stop event modifier To prevent bubbling @click.stop</p><p style="text-align: left;">Use v-bind:class to add the class when the switching menu is selected. :class is the abbreviation </p><pre class="brush:php;toolbar:false">

   
•  

   {{ btn.name }}  

     
   
  •  

      {{sub.name}}  

     
   
  •   

         

     
   
   
 
•    

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to use the JS callback function

JS common algorithms accumulation, iteration, exhaustion, Recursive implementation (with code)

The above is the detailed content of How to use Vue.js to implement the WeChat public account menu editor (detailed idea). For more information, please follow other related articles on the PHP Chinese website!