webview.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <ie-page :fix-height="true">
  3. <ie-navbar v-if="showNavbar" :title="pageTitle" />
  4. <ie-auto-resizer>
  5. <web-view class="w-full h-full" :fullscreen="false" border="none" :src="webviewSrc" @load="handleLoad" />
  6. </ie-auto-resizer>
  7. </ie-page>
  8. </template>
  9. <script lang="ts" setup>
  10. import { useTransferPage } from '@/hooks/useTransferPage';
  11. const { prevData, transferBack } = useTransferPage();
  12. const showNavbar = ref(true);
  13. const webviewSrc = ref('');
  14. const pageTitle = ref('');
  15. const webviewParams = ref('');
  16. onLoad(() => {
  17. const { url, params, title, showNavbar: _showNavbar } = prevData.value
  18. pageTitle.value = title;
  19. showNavbar.value = JSON.parse(_showNavbar) ?? true;
  20. try {
  21. uni.$ie.showLoading();
  22. if (typeof params === 'string') {
  23. webviewParams.value = JSON.parse(params);
  24. } else {
  25. webviewParams.value = params;
  26. }
  27. webviewSrc.value = `${url}?${Object.entries(webviewParams.value).map(([key, value]) => `${key}=${value}`).join('&')}`;
  28. } catch (error) {
  29. uni.$ie.showToast('参数错误');
  30. transferBack();
  31. }
  32. });
  33. const handleLoad = () => {
  34. uni.$ie.hideLoading();
  35. }
  36. </script>
  37. <style lang="scss">
  38. :deep(iframe) {
  39. width: 100% !important;
  40. height: 100% !important;
  41. border: none;
  42. z-index: 999;
  43. }
  44. </style>