sweetalert2移动端使用自定义html模板，倒计时功能

最近在使用vue3+vite+vant时，遇到了v-model无法控制显隐的问题，vant作者在github中表示下版本会优化vant-dialog，所以找了sweetalert2插件，样式好看，所以就想砸和移动端试试，但是按照文档上customeClass不生效，所以查了github的issues，解决方法如下：

import Swal from 'sweetalert2'

const sw2 = Swal.mixin({
        customClass: {
          popup: 'sw2popup',
          container: 'sw2container',
          htmlContainer: 'sw2htmlContainer'
        },
        buttonsStyling: false
      })
   		// 定时器
        let timer = ref(null)
        let count = reactive(4)
   		//内容
 		const ht =`<p>测试sweetalert2</p>`
        // 弹窗
        sw2
          .fire({
            title: '产品检测委托单须知',
            html: ht,
            showCancelButton: true,
            focusConfirm: false,
            confirmButtonText: '我已阅读',
            cancelButtonText: '取消',
            didOpen: () => {
              sw2.disableButtons()
              const b = sw2.getConfirmButton()
              timer = setInterval(() => {
                // 创建定时器
                if (count === 0) {
                  // 关闭定时器
                  sw2.enableButtons()
                  b.textContent = `我已阅读`
                  clearInterval(timer)
                  timer = null
                  count = 4
                } else {
                  b.textContent = `我已阅读${count}`
                  count--
                }
              }, 1000)
            },
            willClose: () => {
              sw2.enableButtons()
              clearInterval(timer)
            }
          })
          .then(result => {
            if (result.isConfirmed) {
            } else {
            }
          })

样式：

<style>
.sw2popup {
  font-size: 16px;
}
.sw2htmlContainer {
  text-align: left !important;
}
</style>