AliPayForm 支付宝付款表单

将支付宝的付款form表单字符串在组件中渲染，渲染完成后自动提交表单，然后在iframe中显示付款二维码。

组件源码

<script lang="ts" setup>
import { ref, watch } from 'vue';

const $props = defineProps<{
  formHtml?: string;
}>();
const $emits = defineEmits<{
  (e: 'handleLoaded', loaded: boolean): void;
}>();

const iframeName = 'alipay';
const aliPayRef = ref<HTMLElement>();
const iframeRef = ref<HTMLIFrameElement>();

watch(
  () => $props.formHtml,
  (val) => {
    if (!val || !aliPayRef.value) return;

    aliPayRef.value.innerHTML = val;
    const form = aliPayRef.value.children[0] as HTMLFormElement;
    form.target = iframeName;
    form.submit();

    iframeRef.value!.onload = () => {
      $emits('handleLoaded', true);
    };
  },
  { immediate: true }
);
</script>

<template>
  <div ref="aliPayRef" class="box" />
  <iframe
    v-show="formHtml"
    v-bind="$attrs"
    ref="iframeRef"
    class="alipay-iframe"
    frameborder="0"
    :name="iframeName" />
</template>

<style lang="scss" scoped>
.box {
  width: 0;
  height: 0;
}
.alipay-iframe {
  margin: 0 auto;
  width: 100%;
}
</style>

基本用法

在vue组件中引入AliPayForm组件，如下：

<template>
  <ali-pay-form formHtml="..." />
</template>

<script lang="ts">
import AliPayForm from '...'
</script>