微信小程序components组件封装（消息提示框）

微信小程序components组件封装（消息提示框）

一 、文件列表 根目录下创建 组件模板

二 、写入组件模板样式

<!--components/tips/tips.wxml-->

<!-- 模态对话框 -->
<view class="mask" catchtouchmove="preventTouchMove"></view>

<view class="toast-wrap">
  <view class="toast-title">提示</view>
  <view class="toast-content">{{paramAtoB}}</view> <!-- {{paramAtoB}} 父组件向子组件中传入的参数-->
  <view class="click-wrap">
    <view class="cancel" bindtap='cancelShowModal'>取消</view>
    <view class="sure" bindtap='goAuthentication'>去认证</view>
  </view>
</view>

/* components/tips/tips.wxss */

/* 模态框 */
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
}
 
.modalDlg{
    width: 500rpx;
    height: 620rpx;
    position: fixed;
    top: 50%;
    left: 5%;
    z-index: 99;
    margin: -370rpx 85rpx;
    background-color: #fff;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.toast-wrap{
  width:550rpx;
  height:290rpx;
  background-color: #fff;
  position: fixed;
  left:13%;
  top:40%;
  z-index: 9999;
  border-radius: 10rpx;
}
.toast-title{
  width:100%;
  height:80rpx;
  text-align: center;
  line-height: 80rpx;
  color: #000;
  font-size: 32rpx;
  font-weight: bold;
  margin-top:30rpx;
}
.toast-content{
  width:100%;
  height:90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  color:#ccc;
  text-align: center;
}
.click-wrap{
  width:100%;
  height:90rpx;
  line-height: 90rpx;
  display: flex;
  font-size: 32rpx;
  border-top:2rpx solid #f2f2f2;
  box-sizing: border-box;
}
.click-wrap .cancel{
  width:50%;
  height:100%;
  line-height: 90rpx;
  text-align: center;
  border-right:2rpx solid #f2f2f2;
  box-sizing: border-box;
}
.click-wrap .sure{
  width:50%;
  height:100%;
  line-height: 90rpx;
  text-align: center;
  color:#ef4631;
}

// components/tips/tips.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    paramAtoB: String   //接收父组件传递过来的参数
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {

    // 取消弹出提示框
    cancelShowModal: function () {
      var that = this
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 1];  //当前页面
      prevPage.setData({
        showModal: false
      })
    },
    
    //提示框 点击确认事件
    goAuthentication: function () {
      var that = this
      wx.navigateTo({
        url: '/pages/cooperationSupply/cooperationSupply'
      })
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 1];  //当前页面
      prevPage.setData({
        showModal: false
      })
    },
  }
})

三 、页面中引入组件模板

1. .json中定义组件模板名称和路径

"usingComponents": {
"tips": "/components/tips/tips"
},  //tips：组件名称

2. .wxml中引入组件模板

<!-- 提示框组件 -->
<tips wx:if="{{showModal}}" paramAtoB="{{msg}}"></tips> //paramAtoB="{{msg}}" 为页面向组件模板中传入的参数

四、封装结果

前端进阶精选：点此去