添加互动弹窗关闭时初始化对应的数据

src/components/CustomTabs/index.tsx

-import { defineComponent, nextTick, onMounted, reactive, ref, provide, useSlots } from 'vue';
+import { defineComponent, nextTick, onMounted, reactive, ref, provide, useSlots, watch } from 'vue';
 import './index.less';
 import './index.less';
 
 
 export default defineComponent({
 export default defineComponent({
@@ -23,12 +23,13 @@ export default defineComponent({
     provide('currentTab', currentTab);
     provide('currentTab', currentTab);
     // 获取tab_panel的props
     // 获取tab_panel的props
     const getTitles = () => {
     const getTitles = () => {
-      const c_titles = use_slots.default!().map(({ props }) => {
+      const c_titles = use_slots.default!().map(({ props }, index) => {
         if (props) {
         if (props) {
           const { label, name } = props;
           const { label, name } = props;
           return {
           return {
             label,
             label,
             name,
             name,
+            index,
           };
           };
         }
         }
       });
       });
@@ -88,6 +89,18 @@ export default defineComponent({
       });
       });
     };
     };
 
 
+    watch(
+      () => props.modelValue,
+      (v) => {
+        // 找到对应的下标
+        let index = titles.value.findIndex((item: any) => item.name == v);
+        if (index !== -1) {
+          // 更新tab_bar的位置
+          onChange(titles.value[index].name, titles.value[index].index);
+        }
+      },
+    );
+
     // 切换tab
     // 切换tab
     const onChange = (name: string, index: number) => {
     const onChange = (name: string, index: number) => {
       currentTab.value = name;
       currentTab.value = name;

src/components/Dialog.vue

@@ -6,6 +6,7 @@
     class="c-dialog-default"
     class="c-dialog-default"
     :destroyOnClose="destroyOnClose"
     :destroyOnClose="destroyOnClose"
     :placement="placement"
     :placement="placement"
+    @close="onClose"
   >
   >
     <slot></slot>
     <slot></slot>
     <div class="header-default">
     <div class="header-default">
@@ -44,7 +45,7 @@ const props = withDefaults(
     className: '',
     className: '',
   },
   },
 );
 );
-const emit = defineEmits(['update:modelValue', 'confirm']);
+const emit = defineEmits(['update:modelValue', 'confirm', 'close']);
 const visible = ref(props.modelValue);
 const visible = ref(props.modelValue);
 
 
 watch(
 watch(
@@ -64,6 +65,10 @@ watch(
 const onConfirm = () => {
 const onConfirm = () => {
   emit('confirm');
   emit('confirm');
 };
 };
+
+const onClose = () => {
+  emit('close');
+};
 </script>
 </script>
 
 
 <style lang="less">
 <style lang="less">

src/pages/createInteract/components/AddInteractDialog.vue

 <template>
 <template>
-  <Dialog v-model="visible" className="reset-interact-dialog" :footer="true" :destroyOnClose="false">
+  <Dialog v-model="visible" className="reset-interact-dialog" :footer="true" :destroyOnClose="false" @close="onClose">
     <template #header>
     <template #header>
       <template v-if="type == 'add'"> 新增互动内容 </template>
       <template v-if="type == 'add'"> 新增互动内容 </template>
       <template v-else> 修改互动内容 </template>
       <template v-else> 修改互动内容 </template>
@@ -249,6 +249,11 @@ const openSoundColor = () => {
   }
   }
 };
 };
 
 
+// 弹窗关闭
+const onClose = () => {
+  clearData();
+};
+
 // 已选择的内容
 // 已选择的内容
 const tonesItemChange = (item: any) => {
 const tonesItemChange = (item: any) => {
   tonesInfo.value = item;
   tonesInfo.value = item;