modal-upgrade

Modal 微信小程序对话框组件

install

npm i  modal-upgrade

npm init -y

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

Describe

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

API

:label: Modal props

属性	说明	类型	默认值
id	组件唯一标识，用于获取当前组件	String	-

:label: Modal property

属性	说明	类型	默认值
title	对话框标题，使用custom自定义模式，则title无效	String	-
content	对话框内容，使用custom自定义模式，则content无效	String	-
confirmColor	确定按钮颜色	String	#FFF
cancelColor	取消按钮颜色	String	#999999
submitBackground	确定按钮背景颜色	String	linear-gradient(300deg,rgba(81,166,255,1) 0%,rgba(167,218,255,1) 100%)
cancelBackground	取消按钮背景颜色	String	#FFF
showCancel	是否显示取消按钮	Boolean	true
data	对话框传入参数，扩展参数	Number | String | Object | Boolean | Array	-
showFooter	显示底部	Boolean	true
showSubmit	是否显示确定按钮	Boolean	true
backgroundColor	对话框背景颜色	String	#FFF
file	启动全屏模式	Boolean	false
type	内容类型 text | array | custom | conterHtml； text为纯文本显示内容; array为列显示状态，详细使用见下方案例<启用type为array类型模式>； custom为自定义模式采用slot插槽自定义；conterHtml启动内容html自定义专区；	String	text
textCenter	内容对齐方式	String	center
timer	自动消失时间	String	-
cancelText	取消按钮文字	String	取消
submitText	确定按钮文字	String	确定
conterHtml	自定义html内容专区	Html	-
shade	开启遮罩层	Boolean	true
zIndex	弹框显示层级	String	1102
asyncEsl	开启异步加载确定按钮变成loading; 详细使用见下方案例<启用异步模式>； success函数中的loadingSync用来异步关闭弹窗。	Boolean	false
loadingColor	异步加载loading颜色	String	white
loadingSize	异步加载loading大小	String | Number	40
btnHeight	按钮高度	String | Number	88

:label: Modal slot

名称	说明
-	插入组件标签内部，进行自定义内容区域

:label: Modal methods

方法名	说明	参数
showSuccess	对话框展示时的回调函数	params(Object): 说明：Object为props内的data数据
success	对话框点击取消或确认回调函数	params(Object): confirm：点击了确定按钮 cancel：点击了取消按钮 data：props内的data扩展数据
hidden	对话框隐藏	-
watch	对传入的data扩展参数进行监听，可监听设置data事件	parms(Object) target:当前设置的属性 key:当前修改的key值 value:新设置的值

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()