闲来无事写个Component弹窗

建立文件夹showTip位于component下面:

对应Component四个文件搞好：

json:

{
  "component": true,
  "usingComponents": {}
}

js:

// component/showTip/showtip.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 显示控制
    is_show:{
      type:Boolean,
      value:false
    },
    // 标题
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
      type: String,
      value: '内容'
    },
    // 按钮内容
    btn: {
      type: String,
      value: '知道了'
    },
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 关闭自定义弹窗
     */
    exitShowtip(){
      this.setData({
        is_show:!this.data.is_show,
      })
    }

  },
})

wxss:

/* component/showTip/showtip.wxss */
.showtip-box{
  width: 400rpx;
  height: 500rpx;
  background: #F5F5F5;
  border-radius: 30rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 0 30rpx;
}
.showtip-box .title{
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
}
.showtip-box .btn{
  background: #0000FF;
  color: #fff;
  line-height: 70rpx;
  border-radius: 12rpx;
  text-align: center;
  font-size: 26rpx;
  margin: 30rpx 0 0 0;
}
.showtip-box  .show-content{
  height: 300rpx;
  font-size: 26rpx;
  color: #333;
  text-align: center;
}

wxml:

<!--component/showTip/showtip.wxml-->
<view class="showtip-box" wx:if="{{ is_show }}">
  <view class="title">{{ title }}</view>
  <view class="show-content">
    {{ content }}
  </view>
  <view class="btn" bindtap="exitShowtip">{{ btn }}</view>
</view>

调用：在pages里随便建立一个，用于演示

谁调用谁json文件要引入

我建立index,那么index.json要引入

{
  "usingComponents": {
    "showtip": "/component/showTip/showtip"
  }
}

要调用wxml:

<showtip is_show='true' title='标题'  content='我是内容'></showtip>