Apex上拉菜单（编辑、置顶、删除、取消）

• 引入Apex的上拉菜单组件

子组件

/*图标*/
<import name="my-icon" src="apex-ui/components/icon/index"></import>
/*上拉菜单*/
 <import name="my-action-sheet" src="apex-ui/components/action-sheet/index"></import>

html

<div class="btn">
<!-- 多功能按钮 -->
 <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: '三秒后自动关闭',
      buttons: [
      	{
        text: '编辑',
      	},
      	{
        text: '顶置',
      	}
      ],
      buttonClicked: (index,item)=>{
      	//index==0 代表编辑
        if(index==0){
          const router = require('@system.router')  //这句话是啥意思？？？？？？？
          router.clear()
          router.push({ 
            uri: 'pages/add', //点击编辑后路由跳转至添加页面（通过指定参数传递跳转）
            params: {
            title: this.memo.title,
            content: this.memo.content,
            index: this.memo.index,
            label: this.memo.label,
            }
          })
        }
       // index==1 代表顶置
       //this.$emit("function",param); 子组件向父组件传值
         if (index == 1) {
           this.$emit('topUp', { index: this.index })
        }
        return true
} 

父组件

      <!-- 列表 -->
      <div class="list">
        <block for="searchList">
          <memo  memo="{{$item}}" index="{{$idx}}"   @top-up="topUp"></memo>
          // @top-up="topUp" 前面的定义 不可以使用驼峰式
        </block>
      </div>
    </div>

  topUp(e){
    let obj = {};  //定义一个对象
    this.memoList.forEach((item,index)=>{   //对memoList这个数组通过index下标进行for循环 
    if(index === e.detail.index){        //如果下标与选定的的相对应，则该置顶功能生效，将item添加到obj这个数组对象里
        item.is_top=true;
        obj = item;
        this.memoList.splice(index,1)  //memoList这个对象中的第一个参数为第一个位置
        return;
    }else{
      item.is_top=false;  //否则 顶置无效
    }
  })
  //从数组最后一项添加数据  置后
  //  this.memoList.push(obj);
   //给数组第一项添加    顶置/置前
   this.memoList.unshift(obj); 
   setMemoList(this.memoList);
  }

删除也是同样的写法
子页面

      // 删除
      destructiveText: '删除',
      destructiveButtonClicked: () => {
      prompt.showDialog({
      title: '提示',
      message: '是否删除这条记录',
      buttons: [
        {
          text: '确定',
          color: '#ff2828'
        },
        {
          text: '取消',
          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: '删除成功'
          })
        }

父页面

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

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

剩余的内容

     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)
  },