微信小程序之自定义组件

1、创建自定义组件

在pages创建一个components目录专门用来存放自定义组件，这里创建一个弹窗组件modal。

image.png

modal.wxml:

<block>
  <view class='wx_dialog' hidden="{{!isShow}}">
    <view class='wx-mask'></view>
    <view class='wx-dialog-content'>
      <view class='wx-dialog-title'>
        <view wx:if="{{title}}">
          <text>{{ title }}</text>
          <text class="iconfont icon-cross" catchtap='_cancelEvent'></text>
        </view>
        <slot name="title"></slot>
      </view>
      <view class='wx-dialog-contents'>
        <text wx:if="{{content}}">{{content}}</text>
        <slot wx:else name="content"></slot>
      </view>
      <view class='wx-dialog-footer'>
        <view wx:if="{{!customFooter}}">
          <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
          <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
        </view>
        <slot wx:else name="footer"></slot>
      </view>
    </view>
  </view>
</block>

modal.js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持 
  },
  /** 
   * 组件的属性列表 
   * 用于组件自定义设置 
  */
  properties: {
    // 弹窗标题 
    title: { // 属性名 
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） 
      value: '' // 属性初始值（可选），如果未指定则会根据类型选择一个 
    },
    // 弹窗内容 自定义
    content: { type: String, value: '' },
    // 弹窗取消按钮文字 
    cancelText: { type: String, value: '取消' },
    // 弹窗确认按钮文字 
    confirmText: { type: String, value: '确定' },
    customFooter: { type: Boolean, value: false}
  },
  /** 
   * 私有数据,组件的初始数据 
   * 可用于模版渲染 
   */
  data: { // 弹窗显示控制 
    isShow: false
  },
  /**
   * 组件的方法列表 
   * 更新属性和数据的方法与更新页面数据的方法类似 
  */
  methods: {
    /** 
    * 公有方法 
    */
    //隐藏弹框 
    hideDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    //展示弹框 
    showDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    /** 
     * 内部私有方法建议以下划线开头 
     * triggerEvent 用于触发事件 
    */
    _cancelEvent() { //触发取消回调 
      this.triggerEvent("cancelEvent")
    },
    _confirmEvent() { //触发成功回调 
      this.triggerEvent("confirmEvent");
    }
  }
})

modal.json:

{
  "component": true
}

modal.wxss:

@import "../../../app.wxss";
.wx_dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.wx-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .3);
  z-index: 99;
}
.wx-dialog-content {
  position: absolute;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  /* height: 200px; */
  padding-bottom: 60px;
  z-index: 100;
  border-radius: 5px;
}
.wx-dialog-contents {
  padding: 10px;
}
.wx-dialog-title {
  padding: 10px 10px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.wx-dialog-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eee;
}
.wx-dialog-btn {
  display: inline-block;
  width: 49%;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
}
.wx-dialog-btn:first-child {
  border-right: 1px solid #eee;
}
.wx-dialog-title .iconfont{
  float: right;
}

2、引入组件

父组件中引入modal
index.wxml:

<modal id="dialog" bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent" customFooter="true">
  <view slot="title">
    ddddddd
  </view>
   <view slot="content">
   我是组件的内容
    </view>
    <view slot="footer">
      <view style='text-align: center;'>关闭</view>
    </view>
  </modal>

index.json:

{
  "usingComponents": {
    "modal": "../components/modal/modal"
  }
}

index.js：

onReady: function () {
    this.modal = this.selectComponent("#dialog"); 
    console.log(this.modal.data.isShow)
    this.modal.setData({
      isShow: true
    })
  },
 //取消事件 
  _cancelEvent() {
    console.log('你点击了取消');
    this.modal.hideDialog();
  },
  //确认事件 
  _confirmEvent() {
    console.log('你点击了确定');
    this.modal.hideDialog();
  },
~~
这是结果图：
![image.png](https://img.haomeiwen.com/i6109679/e6e477ed52e099e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

在这里我使用了slot插槽来自定义组件内部的内容，也可以直接使用属性来固定死组件内部的内容。