go-view/src/packages/components/Informations/Mores/Iframe/index.vue

<template>
  <div :style="getStyle(borderRadius)">
    <iframe :src="option.dataset" :width="w" :height="h"></iframe>
  </div>
</template>

<script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs } from "vue";
import { useChartDataFetch } from "@/hooks";
import { CreateComponentType } from "@/packages/index.d";
import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true,
  },
});

const { w, h } = toRefs(props.chartConfig.attr);
const { dataset, borderRadius } = toRefs(props.chartConfig.option);

const option = shallowReactive({
  dataset: "",
});

const getStyle = (radius: number) => {
  return {
    borderRadius: `${radius}px`,
    overflow: "hidden",
  };
};

// 编辑更新
watch(
  () => props.chartConfig.option.dataset,
  (newData: any) => {
    option.dataset = newData;
  },
  {
    immediate: true,
    deep: false,
  }
);

// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  option.dataset = newData;
});
</script>