根据wx.actionSheet封装的操作菜单组件

最新推荐文章于 2023-10-17 14:36:59 发布

苏苏哇哈哈

最新推荐文章于 2023-10-17 14:36:59 发布

阅读量209

点赞数

分类专栏： git 文章标签：小程序封装

本文链接：https://blog.csdn.net/qq_48085286/article/details/119847960

版权

git 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

1.实现效果

在这里插入图片描述

2.组件介绍

在这里插入图片描述

3.部分代码

// components/actionSheet/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否显示弹框
    is_show:{
      type:Boolean,
      value:false
    },
    // 是否显示取消按钮
    cancelText:{
      type:String,
      value:'取消'
    },
    // 选项列表
    action_list:{
      type:Array,
      value:[]
    },
    // 点击蒙层是否可以关闭
    mask_is_click:{
      type:Boolean,
      value:false
    },
    alertText:{
      type:String,
      value:''
    },
    //提示文字字颜色
    alertColor:{
      type:String,
      value:'#333'
    },
    // 按钮的文字颜色
    itemColor:{
      type:String,
      value:'#333'
    }

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    closeModal() {
      if (this.data.mask_is_click) {
        this.cancel();
      }
    },
    cancel() {
      this.setData({
        is_show:false
      })
      this.triggerEvent('cancel');
    },
    handleClick(e) {
      this.setData({
        is_show:false
      })
      const dataset = e.currentTarget.dataset || ''
      this.triggerEvent('click', dataset)
    },

  }
})