Detailed explanation of steps to implement WeChat public account menu editor with Vue.js (Part 1)

This time I will bring you Vue.js to implement the WeChat public account menuEditorDetailed steps (Part 1), Vue.js to implement the WeChat public account menu editorNotes What are they? Here are actual cases. Let’s 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 a method to the vue instance

In the vue instance give Add our custom method to the methods object

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 when the add button is clicked, the selectedMenu method is triggered. Add addMenu method. Use v-on to listen to the <a href="http://www.php.cn/php/php-tp-incident.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:

JS calculation of pi to 100 decimal places implementation steps detailed explanation

vue axios production environment and release Detailed explanation of the steps for configuring different interface addresses in the environment

The above is the detailed content of Detailed explanation of steps to implement WeChat public account menu editor with Vue.js (Part 1). For more information, please follow other related articles on the PHP Chinese website!