故事背景
卤煮开发的小程序还处在绘制静态页面的阶段，发现弹框这东西使用频率太高了，能不能封装一个公共组件呢~

实现效果

图片红色区域一律动态传入，放在vue框架，这个肯定很好封装，难就难在现在是放在微信小程序里面封装，卤煮可真的是踩了不少的坑，内容区域其实是最不好复用的，所以这部分卤煮用了微信小程序提供的标签rich-text，它可是支持插入HTML标签~
戳这里。友情提示，看完官方api你觉得你就行了？？？大错特错，记得回来接着看卤煮的~~

代码实现

1.先看弹窗组件的部分(样式先撇一边)，WXML上图~

JS部分，datas渲染页面，给一些初始值，然后resetData函数合并传进来的数据，最后利用小程序的父子通信this.triggerEvent()，将用户点击了确定还是取消传入父组件（卤煮有关于组件父子通信的文章~）

Component({
  properties: {
    modalData: {
      type: Object,
      default: () => ({})
    },
  },
  data: {
    datas: {
      title: '提示',
      htmlSnip: '',
      cancelText: '取消',
      confirmText: '确定',
      showCancel: true,
    },
  },
  attached() {
    this.resetData();
  },
  methods: {
    resetData() {
      this.setData({
        datas: Object.assign(this.data.datas, this.properties.modalData),
      });
    },
    btnClick(e) {
      this.triggerEvent('btnClick', e.currentTarget.dataset.opestatus);
    },
  }
})

2.父组件部分，先调用子组件，上图~

然后传进去的数据就是HTML，模板字符串书写HTML，后期联调添加变量也很方便，没啥好说的~

htmlSnip: `
        <div class="main_content">
          <label class="label">
            <span class="span">中文姓名</span>
            <span class="span">王二小</span>
          </label>
          <label class="label">
            <span class="span">姓名拼音</span>
            <span class="span">wang erxiao</span>
          </label>
          <label class="label">
            <span class="span">身份证号</span>
            <span class="span">371324********0817</span>
          </label>
          <label class="label">
            <span class="span">证件有效期</span>
            <span class="span">未上传</span>
          </label>
        </div>
      `,
      cancelText: '重新上传',
      confirmText: '手动填写',
    },

其实写到这里，已经可以动态控制弹窗的复用了，标题和按钮这些是几乎不变的，但我们动态插入的HTML是具有多变性的，所以控制它的样式就成了问题，接下来上代码，建议先看这里

1.解除子组件的样式隔离，apply-shared 表示页面（父组件） wxss 的样式将影响到自定义组件(子组件)，但自定义组件 wxss 中指定的样式不会影响页面到页面（父组件）；

{
  "component": true,
  "usingComponents": {},
  "styleIsolation": "apply-shared"
}

2.解除父组件的样式隔离，shared 表示页面（父组件） wxss 样式将影响到自定义组件（子组件），自定义组件（子组件） wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

{
  "component": true,
  "usingComponents": {
    "confirm_modal": "/components/common/showModal/showModal"
  },
  "styleIsolation": "shared"
}

3.重中之重在这里了，如何书写rich-text里面HTML的样式呢？注意一点就好了，插入的HTML标签，在WXSS里面书写样式时避免出现HTML的标签名，就是不要用标签选择器来书写样式，可能是rich-text的原因，即便你插入的HTML中有微信小程序依然支持的标签，但用标签选择器书写样式依旧不起作用~

所以要向卤煮这么写~

总结一下，像这种小型弹框，提示内容不是很多的极力推荐封装公共的弹框组件，但弹框内容涉及过多内容时就不要用了，毕竟你插入的HTML书写样式是硬伤，每个标签都加类名你不累吗，有这时间你单独给父组件写一个弹窗都可以了~