小程序、App自定义弹框（结合Tailwindcss或者unocss）

效果：

二次确认清除数据二次确认弹框xiang相关代码：

HTML代码：

 <view class="modal-container relative" v-if="showModal">
      <view class="absolute">
        <view class="flex justify-center h-562rpx">
          <image
            class="w-190rpx h-190rpx mb-20rpx"
            src="@/static/home/prompt.png"
            mode="aspectFill"
          ></image>
        </view>
      </view>
      <view class="modal">
        <view class="modal-content">
          <view class="text-#FF7171 text-40rpx font-600">温馨提示</view>
          <view class="text-#333 text-44rpx font-600 mt-30rpx mb-15rpx">
            您是否确定清空当前数据！
          </view>
          <view class="flex justify-around">
            <view class="btn2 btn-cancel" @click="handleCancel">
              <text class="text-#333 ml-12rpx text-32rpx">取消</text>
            </view>
            <view class="btn2 btn-confirm" @click="handleConfirm">
              <text class="text-#fff ml-12rpx text-32rpx">确认</text>
            </view>
          </view>
        </view>
      </view>
    </view>

script代码：

//控制弹框显示隐藏
const showModal = ref(false)


//触发弹框打开
const handlonNavRightClick = async () => {
  showModal.value = true
}

//弹框中确认操作
const handleConfirm = async () => {
  const res = await youAPI()
  if (res.code === 200) {
    //清除数据成功，关闭弹框
    showModal.value = false
    // 更新页面
    searchData()
  } else {
    //清除数据失败，给出提示
    uni.showToast({
      title: '参数错误',
      icon: 'none',
    })
    showModal.value = false
  }
}
// 弹框中取消操作
const handleCancel = () => {
  showModal.value = false
}

css代码：

  .btn2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 272rpx;
    height: 60rpx;
    margin: 14rpx 0;
    border-radius: 12rpx;
  }
  .btn-cancel {
    height: 88rpx;
    background-color: rgba(241, 241, 241, 1);
    border-radius: 50rpx;
  }

  .btn-confirm {
    height: 88rpx;
    background-color: rgba(50, 118, 255, 1);
    border-radius: 50rpx;
  }
// 自定义弹框样式
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal {
  background-color: white;
  padding: 80rpx 40rpx 40rpx 40rpx;
  width: 80%;
  border-radius: 10px;
  text-align: center;
}
.modal-image {
  width: 190rpx;
  height: 190rpx;
  margin-bottom: 10px;
}
.modal-content {
  margin-top: 10px;
}