modal-upgrade v1.2.1

Modal 微信小程序对话框组件

install

npm i  modal-upgrade

npm init -y

详情->本地设置->开启es6转es5、增强编译

Describe

此组件仅适用于微信小程序，其功能为弹出框，可自定义内容支持html内容嵌入，并可以作为弹出层，自动消失，与手动关闭弹框，带有数据携带的能力，可检测显示回调与点击确定与取消回调，以及自定义标题内容与底部,并支持异步提交。

API

:label: Modal props

:label: Modal property

:label: Modal slot

:label: Modal methods

Modal step

• 在app.json或page.json中注册组件

{
  "usingComponents": {
    "view-modal-upgrade": "/miniprogram_npm/modal-upgrade/index"
  }
}

• page页面使用组件

<view-modal-upgrade id='review'></view-modal-upgrade>

• Js中创建组件实例

let model = this.selectComponent('#review');

• 使用对话框

model.showModel({
    title:"使用案例1",
    content:"此内容为使用案例",
    confirmColor:'white',
    cancelColor:'black',
    showCancel:true,
    data:{
        name:"name",
        age:"age",
        text:"text"
    },
    showFooter:true,
    showSubmit:true,
    file:false,
    type:"text",
    textCenter:"center",
    timer:"60",
    showSuccess:function(data){
    	console.log(data)
    },
    watch:function(target,key,value){
    	console.log(target,key,value)	
    },
    success:function(data){
        if(data.confirm){
            console.log(data)
        }else{
            console.log(data)
        }
    }    
})

Modal special {#1}

• 启用slot插槽，启用自定义模式

model.showModel({
  type:'custom',
  showFooter:false,
  data:{
      data1:"data1",
      data2:"data2"
  },
  showSuccess:function(data){
    	console.log(data)
  },
  success:function(data){
     console.log(data) 
  }      
})

<view-modal-upgrade id='review'>
    <view>  自定义内容  </view>
</view-modal-upgrade>

• 启用内容html自定义专区

model.showModel({
  type:'conterHtml',
  conterHtml:"<p>启动html自定义专区</p>", 
  showFooter:false,
  data:{
      data1:"data1",
      data2:"data2"
  },
  showSuccess:function(data){
    	console.log(data)
  },
  success:function(data){
     console.log(data) 
  }      
})

• 启用异步模式

   model.showModel({
      title:"使用异步loading加载模式",
      content:"使用异步loading加载内容",
      asyncEsl:true,
      loadingColor:"white",
      loadingSize:"40",
      showSuccess:function(data){
        // console.log(data)
      },
      success:function(data){
          if(data.confirm){
              setTimeout(() => {
                  //接口请求成功请设置loadingSync为true
                  data.loadingSync = true
              }, 3000);
          }else{
              console.log(data)
          }
      }
  })

• 启用type为array类型模式

 model.showModel({
      title:"Array内容模式",
      content:[{name:"左侧1",value:"右侧1"},{name:"左侧2",value:"右侧2"}],
      type:"array",
      showSuccess:function(data){
        // console.log(data)
      },
      success:function(data){
          // console.log(data)
      }
  })

• 手动调用方法

//手动调用模态框隐藏函数
model.hidden()

//手动调用 确定按钮事件 
model.yes()

//手动调用 取消按钮事件 
model.no()