Vue mobile project (click the feedback panel to enter the secondary panel)

Achievement effect: Click on the feedback panel to enter the secondary panel

In order to facilitate data management, create report.js in the api folder as the data of the secondary panel

export const firstActions=[
{name:'不感兴趣'},
{name:'反馈垃圾内容'}

]

export const secondActions=[
{
  value:0,
  name:'其他问题'
},
{
  value:1,
  name:'标题夸张'
},
{
  value:2,
  name:'低俗色情'
},
{
  value:3,
  name:'错别字多'
},
{
  value:4,
  name:'旧闻重复'
},
{
  value:5,
  name:'内容不实'
},
{
  value:6,
  name:'侵权'
},
{
  value:7,
  name:'广告软文'
},
{
  value:8,
  name:'涉嫌违法犯罪'
}

]

 Second, introduce the reqort.js file in the AriticleItem.vue file for use

import {firstActions,secondActions} from '@/api/report.js'

Assign the method firstActions of the first-level panel data of reports.js to actions

 Correspondingly assign the method of the second-level panel data of reports.js to the feedback garbage content in the first-level panel

methods:{
   formatTime:timeAgo ,//函数体就是formatTime
    onSelect(action,item) {
      // console.log(action) //{name:'反馈垃圾内容'}
      // console.log(item) // 索引值
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
    
    //判断
    if(action.name==='反馈垃圾内容'){
      this.actions=secondActions
    }
  },
 }