Edit, cancel, pull up menu

• introduce Apex Pull up menu component

Child components

/* Icon */
<import name="my-icon" src="apex-ui/components/icon/index"></import>
/* Pull up menu */
 <import name="my-action-sheet" src="apex-ui/components/action-sheet/index"></import>

html

<div class="btn">
<!--  Multifunction button  -->
 <my-button
   ontap="actionSheet('default')"
   type="ghost"
   inline="true"
   icon="menu">
 </my-button>
 <my-action-sheet id="actionSheet"></my-action-sheet>
</div>

js

export default {
    
  data() {
    
    return {
    
      timerActionSheet: null
    }
  },
  actionSheet(theme){
    
    if(this.timerActionSheet) clearTimeout(this.timerActionSheet)
    this.$child('actionSheet').showSheet({
    
      theme,
      titleText: ' Automatic shutdown after three seconds ',
      buttons: [
      	{
    
        text: ' edit ',
      	},
      	{
    
        text: ' Overhead ',
      	}
      ],
      buttonClicked: (index,item)=>{
    
      	//index==0  On behalf of the editor 
        if(index==0){
    
          const router = require('@system.router')  // What does this sentence mean ？？？？？？？
          router.clear()
          router.push({
     
            uri: 'pages/add', // Click Edit to jump to the add page （ Pass jump... By specifying parameters ）
            params: {
    
            title: this.memo.title,
            content: this.memo.content,
            index: this.memo.index,
            label: this.memo.label,
            }
          })
        }
       // index==1  Stands for overhead 
       //this.$emit("function",param);  Child components pass values to parent components 
         if (index == 1) {
    
           this.$emit('topUp', {
     index: this.index })
        }
        return true
} 

Parent component

      <!--  list  -->
      <div class="list">
        <block for="searchList">
          <memo  memo="{
    {$item}}" index="{
    {$idx}}"   @top-up="topUp"></memo>
          // @top-up="topUp"  The previous definition   Do not use hump type 
        </block>
      </div>
    </div>

  topUp(e){
    
    let obj = {
    };  // Define an object 
    this.memoList.forEach((item,index)=>{
       // Yes memoList This array passes through index Subscript for for loop  
    if(index === e.detail.index){
            // If the subscript corresponds to the selected , Then the top setting function takes effect , take item Add to obj In this array 
        item.is_top=true;
        obj = item;
        this.memoList.splice(index,1)  //memoList The first parameter in this object is the first position 
        return;
    }else{
    
      item.is_top=false;  // otherwise   Overhead invalid 
    }
  })
  // Add data from the last item in the array   Put it back 
  // this.memoList.push(obj);
   // Add... To the first item of the array   Overhead / Put forward 
   this.memoList.unshift(obj); 
   setMemoList(this.memoList);
  }

Delete is written in the same way
Subpage

      //  Delete 
      destructiveText: ' Delete ',
      destructiveButtonClicked: () => {
    
      prompt.showDialog({
    
      title: ' Tips ',
      message: ' Delete this record ',
      buttons: [
        {
    
          text: ' determine ',
          color: '#ff2828'
        },
        {
    
          text: ' Cancel ',
          color: '#000000'
        }
      ],
      success: data => {
    
        console.log('handling success', data.index)
        if (data.index == 0) {
    
          this.right = 0
          this.$emit('delete', {
     index: this.index })
          prompt.showToast({
    
            message: ' Delete successful '
          })
        }

Parent page

<memo  memo="{
    {$item}}" index="{
    {$idx}}"   @delete="delete" ></memo>

  delete(e) {
    
    this.memoList.splice(e.detail.index, 1)
    setMemoList(this.memoList)
    this.searchList=this.memoList;
  },

The rest of it

     cancel: function () {
        console.log('handling cancel')
      },
      fail: function (data, code) {
        console.log(`handling fail, code = ${code}`)
      }
    })
        return true
      }
    })
    this.timerActionSheet = setTimeout(() => {
      this.$child('actionSheet').hideSheet()
    }, 3000)
  },