feat:iframe组件

main/src/components/custom-iframe/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <iframe v-if="state.url" :src="state.url" frameborder="0" width="100%" height="100%" @load="onLoad"></iframe>
+</template>
+
+<script setup name="custom-iframe">
+import { reactive, watch } from 'vue';
+import { isExternal } from '@/utils/validate';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['on-load']);
+
+const state = reactive({
+  url: '',
+  loaded: false,
+});
+
+watch(
+  () => props.url,
+  (val) => {
+    if (isExternal(val)) {
+      state.url = val;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+const onLoad = () => {
+  state.loaded = true;
+  emit('on-load', state.loaded);
+};
+</script>

main/src/components/index.js

@@ -1,4 +1,5 @@
 import SvgIcon from './svg-icon';
+import CustomIframe from './custom-iframe';
 import CustomTableOperate from './custom-table-operate';
 import CustomTableTree from './custom-table-tree';
 import CustomCarouselPicture from './custom-carousel-picture';
@@ -16,6 +17,7 @@ import CustomEchartPie3d from './custom-echart-pie-3d';
 
 export {
   SvgIcon,
+  CustomIframe,
   CustomTableOperate,
   CustomTableTree,
   CustomCarouselPicture,

main/src/utils/validate.js

@@ -45,7 +45,7 @@ export function isHttp(url) {
  * @returns {Boolean}
  */
 export function isExternal(path) {
-  return /^(https?:|mailto:|tel:)/.test(path);
+  return /^(http?:|https?:|mailto:|tel:)/.test(path);
 }
 
 /**