feat: 新增iframe组件

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 .DS_Store
-dist
+customLargeScreen
 dist-ssr
 *.local
 .vscode

build/constant.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-export const OUTPUT_DIR = 'dist'
+export const OUTPUT_DIR = 'customLargeScreen'
 
 // monaco-editor 路径
 export const prefix = `monaco-editor/esm/vs`

src/packages/components/Informations/Mores/Iframe/config.ts

@@ -6,7 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   // 网站路径
-  dataset: "https://www.mtruning.club/",
+  dataset: "",
   // 圆角
   borderRadius: 10
 }

src/packages/components/Informations/Mores/Iframe/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div :style="getStyle(borderRadius)">
-    <iframe :src="option.dataset" :width="w" :height="h" style="border-width: 0"></iframe>
+    <iframe :src="src" :width="w" :height="h" allowfullscreen style="border-width: 0"></iframe>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, shallowReactive, watch, toRefs } from 'vue'
+import { PropType, shallowReactive, watch, toRefs, ref, computed } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import {debounce} from 'lodash'
 
 const props = defineProps({
   chartConfig: {
@@ -20,9 +21,23 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 const { borderRadius } = toRefs(props.chartConfig.option)
 
-const option = shallowReactive({
-  dataset: ''
-})
+// const option = shallowReactive({
+//   dataset: ''
+// })
+
+let src = ref('')
+const setValue = debounce((v: string) => {
+  src.value = v
+}, 1000)
+watch(
+  () => props.chartConfig.option.dataset,
+  (v: string) => {
+    setValue(v)
+  },
+  {
+    immediate: true
+  }
+)
 
 const getStyle = (radius: number) => {
   return {
@@ -31,19 +46,19 @@ const getStyle = (radius: number) => {
   }
 }
 
-// 编辑更新
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: string) => {
-    option.dataset = newData
-  },
-  {
-    immediate: true
-  }
-)
+// // 编辑更新
+// watch(
+//   () => props.chartConfig.option.dataset,
+//   (newData: string) => {
+//     option.dataset = newData
+//   },
+//   {
+//     immediate: true
+//   }
+// )
 
-// 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
-})
+// // 预览更新
+// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+//   option.dataset = newData
+// })
 </script>

src/packages/components/Informations/Mores/index.ts

@@ -5,4 +5,4 @@ import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
 
 // export default [VideoConfig]
-export default []
+export default [IframeConfig]

src/packages/components/Tables/Tables/TableList1/config.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from "vue/dist/vue";
+import { PropType } from "vue";
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'