微信小程序组件：confirm、alert

需求：
1.可选footer位置几个按钮（默认“取消”“确认”）；
2.title、content活的，也可以灵活选择使用插槽；
3.将cancleText和submitText值设置为空，也可以当作alert来使用;
4.点击“确定”按钮以前可以进行一些条件判断，用在表单中比较方便。

emmmm实不相瞒它没什么特别就一普普通通的confirm哈哈哈哈哈今天偶然看到别人的代码就觉得自己原先写的在使用时还是繁琐了一点，所以重写了一遍是更简化了一点，希望自己以后可以记得这种代码编写的模式~

效果图 👇 regular-confirm use-slot

上代码 👇
组件html：↓

<view class="wrap" wx:if="{{show}}" bindtap="close">
  <view class="con bg_w center" catchtap="occupy">
    <slot name="header"></slot>
    <view class="title font_huge" wx:if="{{title}}">{{title}}</view>
    <slot name="content"></slot>
    <view class="content"wx:if="{{content != ''}}">{{content}}</view>

    <view class="btn-con f_r_a" wx:if="{{cancleText != '' || submitText != ''}}">
      <btn btnText="{{cancleText}}" size="normal" type="{{type === 'info'?'stroke':'dangerStroke'}}" width="100px" wx:if="{{cancleText != ''}}" catchtap="cancle" ></btn>
      <btn btnText="{{submitText}}" size="normal" width="100px" wx:if="{{submitText != ''}}" catchtap="submit" type="{{type === 'info'?'fill':'dangerFill'}}"></btn>
    </view>
  </view>
</view>

上面的代码哈哈哈哈哈哈哈忽然发现里面的button也用了组件真是抱歉啊~反正就是图中那样，用标签button也是可以的把对应的方法写对就成。
组件css ↓

.f_r_a {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.wrap {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;

  position: fixed;
  z-index: 10000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(5, 1, 25, .6);
}
.wrap .con {
  box-sizing: border-box;
  width: 90%;

  border-radius: 6rpx;
  padding: 32rpx;
}

.title {
  text-align: center;
}
.content {
  margin: 50rpx auto;
  text-align: center;
}

组件js： ↓

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    show: Boolean,
    type: String,
    title: String,
    cancleText: String,
    submitText: String,
    content: String
  },
}),
  // 这俩方法是写到alert时才又添的，alert妹有关闭按钮，所以点击空白处可以关闭
  // occupy是为了阻止事件捕获而设置的占位方法  
  methods: {
    close() {
      this.setData({
        show: false
      })
    },
    occupy() {}
  }

哈哈哈还有一部分最最重要的代码我还妹有放哟~因为confirm是全局使用的组件，几乎和elementui中的差不多，所以也想让它使用时的方便度堪比elementui可是还是差了点火候唉不过已经达到我的目的了。
这个项目首先将utils里的system.js文件在全局引用，即：在app.js文件中加上这么一句

import "./utils/system";

system.js文件中 ↓

/**
 * 1.确认弹窗：页面中需引入confirm组件，给个id名儿即可  
 * eg   ↓
 * wx._confirm(this, idName, {title,cancleText,submitText,content}).then(() => console.log('确认')).catch(() => console.log('取消));
 * 2.如果在不同页面内需要在“确认”按钮的函数执行之前先执行其它函数，可以用beforeClose
 * eg:  ↓
 * wx._confirm(this, idName, {title,cancleText,submitText,content},done => {
 *  console.log("执行完方法后使用done函数关闭弹窗");
 *  done();
 * }).catch(() => console.log('取消'));
 * @param {*} _this 
 * @param {String} idName 
 * @param {Object} params 
 * @param {Function} beforeClose
 */
wx._confirm = (_this, idName, params, beforeClose) => {
  return new Promise((resolve, reject) => {
    let el = _this.selectComponent(`#${idName}`);

    let {
      title,
      type,
      cancleText,
      submitText,
      content
    } = params;

    el.setData({
      title: !title ? '' : title,
      type: !type ? 'info' : type,
      cancleText: !cancleText ? '取消' : cancleText,
      submitText: !submitText ? '确定' : submitText,
      content: !content ? '' : content,
      show: true
    })

    let close = () => {
      wx.nextTick(() => {
        el.setData({
          show: false
        })
      })
    }

    el.cancle = () => {
      reject()
      close()
    }

    el.submit = () => {
      if (typeof beforeClose === 'function') {
        beforeClose(close);
      } else {
        resolve();
        close()
      }
    }
  })
}

wx._alert = (_this, idName, params) => {
  // init element
  let el = _this.selectComponent(`#${idName}`);
  // getData
  let {
    title,
    content
  } = params;
  // setData
  el.setData({
    title: !title ? '' : title,
    cancleText: "",
    submitText: "",
    content: !content ? '' : content,
    show: true
  })
}

全局组件，在app.json中需要引用组件，不想粘代码了！
在使用的页面中，如果只是常规的confirm的话，只需要在html页面中加一句 ↓
保证与app.json文件中给的标签名一样，再加个id名就可以了，不影响插槽使用。

 // confirm
<confirm id="confirm"></confirm>
 // alert
<confirm id="alert"></confirm>

使用页面中的js部分 ↓

// 1.没有判断条件的用法
wx._confirm(this,'confirm',{
  content: "确定？？？？？？？"
  // 在这个地方设置所有参数，是什么就是什么
  // 不想写注释了自己看吧
}).then(() => {
  console.log("确定的方法")
}).catch(() => {
   console.log("取消的方法");
});

// 有判断条件的用法
    // 弹窗
    wx._confirm(this, "confirm", {
      title: "信息修改"
    }, (done) => {
      setTimeout(() => {
        console.log("接口调取结束调用done");
        done();
      }, 1000)
    }).catch();

wx._alert(this,'alert',{
  title: "TITLE",
  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. A, corporis quis molestias iste 
                 iusto ipsa quos temporibus illo autem accusamus eveniet odio excepturi magnam 
                 laudantium rerum error quidem optio nisi?"
})

tada~~~_{用着老方便了哈哈哈哈哈哈哈}