微信小程序 组件弹窗

一、前言

---

以前小程序弹窗直接调微信modal简单快捷，现在公司最近项目新增需求得底部选择增加一个。不说了上代码。

---

二、具体实现

我们先实现个简单的弹窗组件，详情图如下：

 

实现过程如下：

1.新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹dialog存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图

2.我们可以写一些组件样式和布局，更页面写法类似，我就不多说了，直接把代码贴出 :

dialog.wxml

<!--component/dialog/dialog.wxml-->
<view class="my-dialog" hidden="{{!showDialog}}">
  <view class="my-mask"></view>
  <view class="my-container">
    <view class="title">{{title}}</view>
    <view class="content">
     <view class="row">
      <checkbox-group bindchange="checkboxChange" class="upcheck">
  {{content}} <checkbox value="1" checked="{{item.checked}}" />
    </checkbox-group>
    </view>
    </view>
    <view class="btn-row">
      <view class="confirm" bindtap="_confirm">{{confirmText}}</view>
      <view class="upplan" bindtap="_upplan">{{upText}}</view>
      <view class="cancel" bindtap='_cancel'>{{cancelText}}</view>
    </view>
  </view>
</view>

dialog.wxss

/* component/dialog/dialog.wxss */
.my-dialog {
  opacity: 1;
}
.my-dialog .my-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
.my-dialog .my-container {
  position: fixed;
  width: 80%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
  z-index: 5000;
}
.my-dialog .my-container .title {
  display: inline-block;
  width: 100%;
  margin: 37rpx 0 0 0;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
  color: #303133;
}
.my-dialog .my-container .content {
  margin: 10rpx 0 20rpx;
  display: inline-block;
  width: 100%;
  line-height: 50rpx;
  text-align: left;
}
.my-dialog .my-container .content .row {
  margin: 0 10%;
  width: 80%;
  color: #606266;
  word-break: break-all;
}
.my-dialog .my-container .btn-row {
  padding: 10rpx 0 0;
  display: inline-block;
  width: 100%;
  height: 80rpx;
  line-height: 70rpx;
  font-size: 14px;
  border-top: 1rpx solid #c0c4cc;
}
.my-dialog .my-container .btn-row .confirm {
  float: right;
  width: 30%;
  height: 100%;
  color: #3CC51F;
}
.my-dialog .my-container .btn-row .upplan {
  float: right;
  width: 40%;
  height: 100%;
  color: #86c2ec;
  border-right: 1rpx solid #c0c4cc;
}
.my-dialog .my-container .btn-row .cancel {
  color: #000;
  width: 30%;
  height: 100%;
  border-right: 1rpx solid #c0c4cc;
}
.upcheck{
  display: flex;
  justify-content: center;
  margin: 10px;
}

dialog.js

// component/dialog/dialog.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      // 初始值
      value: '请确认提交信息'
    },
    // 弹窗内容
    content: {
      type: String,
      // 初始值
      value: '是否空载'
    },
    // 弹窗确认按钮文字
    confirmText: {
      type: String,
      value: '确定'
    },
    // 弹窗取消按钮文字
    cancelText: {
      type: String,
      value: '取消'
    },
    // 弹窗center按钮文字
    upText: {
      type: String,
      value: '修改目的站点'
    },
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    showDialog: true,
    noload_stat:''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    show() {
      this.setData({
        showDialog: true
      })
    },
    hide() {
      this.setData({
        showDialog: false
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _cancel() {
      //触发取消回调
      this.triggerEvent("cancel")
    },
    _confirm() {
      //触发成功回调
      this.triggerEvent("confirm");
    },
     _upplan(){
       this.triggerEvent("upplan");
    },
    //选择框事件
    checkboxChange: function (e) {
      this.setData({ noload_stat: e.detail.value[0] == undefined ? "" : e.detail.value[0] })
    },
  }
})

3.模板文件也建好了，在首页用这个组件需要配置一下，首先建一个名为index.json的文件，里边配置"usingComponents"，就是需要引入到首页，直接上代码：

{
  "navigationBarTitleText": "功能列表",
  "usingComponents": {
    "dialog": "/component/dialog/dialog"
  }
}

4.完成这些基本上大功告成了，还有最重要的一步也是最后一步，引入到首页，看代码

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button bindtap="handleSubmit"> 点我 </button>
  </view>
</view>
<dialog id="dialog"
      title="是否确认出发"
      bind:cancel="handleCancelDialog"
      bind:upplan="handleUpplanDialog"
      bind:confirm="handleConfirmDialog">
   </dialog>

配置index.js操作点击事件

onReady: function () {
    // 获得dialog组件
    this.dialog = this.selectComponent("#dialog");
  }, 
  // 点击了提交记录按钮
  handleSubmit(e) {
      // 打开弹窗
      this.dialog.show()

  },
  // 点击了弹出框的取消
  handleCancelDialog() {
    this.dialog.hide()
    console.log("取消")
  },
  // 点击了弹出框的确认
  handleConfirmDialog() {
    this.dialog.hide()
    console.log("确定")
  },
  // 点击了弹出框的确认
  handleUpplanDialog(){
    this.dialog.hide()
    console.log("修改目的站点:" + this.dialog.data.noload_stat)

  }

到此就结束，一个简单的小插件封装好了