modal-upgrade

1.2.1 • Public • Published

Modal 微信小程序对话框组件

install

npm i  modal-upgrade
npm init -y
详情->本地设置->开启es6转es5、增强编译

Describe

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

API

🏷️ Modal props

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

🏷️ 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

🏷️ Modal slot

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

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

Package Sidebar

Install

npm i modal-upgrade

Weekly Downloads

0

Version

1.2.1

License

ISC

Unpacked Size

23.8 kB

Total Files

7

Last publish

Collaborators

  • charon-pluto