自定义微信模态框+封装

模仿微信 showmodel全局封装自定义模态框

好处自己可以随意修改弹窗的样式，调用方法，模仿showmodel

自定义模态重要部分，数据的传递

model.js

// components/model/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    model: {
      type: Object,
      value: {}
    }  //将数据以对象的形式传递
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //确定函数 
    success(e) {
      console.log(this.properties.model)
      console.log(this.data.model)
      let res = {
        errMsg: "showModal:ok",
        cancel: true,
        confirm: false
      }
      if (e.currentTarget.dataset.confirm == "true") {
        res.cancel = !res.cancel
        res.confirm = !res.confirm
      }
      let model = this.properties.model
      model.modelShow = false
      this.setData({
        model
      })
      this.properties.model.success(res)
    }
  }
})

index.js 父级数据

import {  model } from "../../utils/model"  //引入model封装文件
    let $this = this
    model({
      title: '标题',
      modelShow: true,
      cancelText: '取消',
      confirmText: '确定',
      content: ['content',"content"],
      success(res) {
        if (res.confirm) {
          console.log(res)
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log(res)
          console.log('用户点击取消')
        }
      },
    },$this)

model.js

module.exports = {
  model: function (data,ele) {
    console.log(data)
    let model = data
    model.modelShow = "true"
    ele.setData({
      model
    })
  }
};
// 属性	类型	默认值	必填	说明
// title	string		否	提示的标题
// content	string		否	提示的内容
// showCancel	boolean	true	否	是否显示取消按钮
// cancelText	string	'取消'	否	取消按钮的文字，最多 4 个字符
// cancelColor	string	#FFF	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
// confirmText	string	'确定'	否	确认按钮的文字，最多 4 个字符
// confirmColor	string	#FFF	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
// success	function		否	接口调用成功的回调函数
// fail	function		否	接口调用失败的回调函数
// complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）
// object.success 回调函数属性

也可全局调用

//app.js
import {  model } from "./utils/model"
App({
  model,
})

结构页面

model.wxml 这里可以随意更改结构 自定义你自己喜欢的弹窗

<!--components/model/index.wxml-->
<view class="model" wx-if="{{model.modelShow}}">
	<view class="model-box">
		<view class="title">{{model.title}}</view>
		<view class="content-list">
			<view class="centent">{{model.contetn}}</view>
			<view class="centent">contetn</view>
		</view>
		<view class="model-btn">
			<view bindtap="success" data-confirm="false" wx:if="{{model.showCancel}}" style="color:'{{model.cancelColor}}'">{{model.cancelText?model.cancelText:'取消'}}</view>
			<view class="model-line" wx:if="{{model.showCancel}}"></view>
			<view bindtap="success" data-confirm="true" style="color:'{{model.confirmColor}}'">{{model.confirmText?model.confirmText:'确认'}}</view>
		</view>
	</view>
</view>

使用组件

//app.json 全局引入组件
  "usingComponents": {
    "v-model": "/components/model/index"
  }
 // index.wxml 使用组件
<v-model model="{{model}}" modelShow="false"></v-model>

组件样式

/* components/model/index.wxss */
.model {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.model-box {
  width: 400rpx;
  border-radius: 20rpx;
  background: #fff;
  
  overflow: hidden;
}

.title {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 36rpx;

}

.content-list {
  min-height: 100rpx;
}

.centent {
  font-size: 28rpx;
}
.model-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40rpx;
  background: #000;
  color: #fff;
  height: 60rpx;
}
.model-btn view{
  flex: 1;
  font-size: 32rpx;
}
.model-btn .model-line{
  flex: none;
  width: 2rpx ;
  background: #fff;
  height: 100%;
}