根据wx.showModal封装的组件（微信小程序）

最新推荐文章于 2024-08-15 23:03:45 发布

苏苏哇哈哈

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量953

点赞数

分类专栏： git 文章标签：小程序组件化

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

版权

git 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

1.实现效果

在这里插入图片描述

2.组件介绍

在这里插入图片描述

3.部分代码

// components/toastModal/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    is_show:{
      type:Boolean,
      value:false
    },
    title:{
      type:String,
      value:'提示'
    },
    content:{
      type:String,
      value:''
    },
    cancelText:{
      type:String,
      value:''
    },
    confirmText:{
      type:String,
      value:''
    },
    // 取消按钮颜色默认为999
    cancelColor:{
      type:String,
      value:'#999'
    },
    // 确认按钮颜色默认为999
    confirmColor:{
      type:String,
      value:'#0a9117'
    },
    // 是否可以编辑
    editable:{
      type:Boolean,
      value:false
    },
    placeholderText:{
      type:String,
      value:'请输入'
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 关闭弹框
    cancel(){
      this.setData({
        is_show:false
      })
      this.triggerEvent('cancel')
    },
    // 确定按钮：
    confirm(){
      this.setData({
        is_show:false
      })
      var myEventDetail = { a:'123'} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      // 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
      this.triggerEvent('confirm',myEventDetail,myEventOption)
    },
    //获取input框的内容
    getInputValue(e){
      let inputValue=e.detail.value;
      this.setData({
        inputValue
      })
      this.triggerEvent('input',e.detail.value)
    }
  }
})