自定义添加空状态显示

src/components/model-custom/components/index.vue

@@ -19,12 +19,13 @@
             <div class="mb-12">内容设置</div>
             <slider v-model="center_height" :max="10000">组件高度</slider>
         </card-container>
-        <card-container class="h selected mb-8">
+        <card-container class="h selected">
             <div class="mb-12">已选组件</div>
             <div class="assembly">
-                <div class="flex-row flex-wrap gap-10">
+                <div v-if="!isEmpty(diy_data)" class="flex-row flex-wrap gap-10">
                     <div v-for="(item, index) in diy_data" :key="index" class="item flex jc-sb align-c size-14 cr-3" :class="{ 'item-active': item.show_tabs }" @click="on_choose(index, item.show_tabs)">{{ item.name }}<icon name="close" color="3" size="10" class="c-pointer" @click="del(index)"></icon></div>
                 </div>
+                <NoData v-else :imgWidth="10"></NoData>
             </div>
         </card-container>
     </div>
@@ -210,6 +211,8 @@ const del = (index: number) => {
                 new_index = new_index - 1;
             }
             set_show_tabs(new_index);
+        } else {
+            emits('rightUpdate', {});
         }
     });
 };

src/components/model-custom/model-custom-content.vue

@@ -25,6 +25,9 @@
                     <template v-else-if="diy_data.key == 'auxiliary-line'">
                         <model-lines-style :key="key" v-model:height="center_height" :value="diy_data"></model-lines-style>
                     </template>
+                    <template v-else>
+                        <NoData :imgWidth="20"></NoData>
+                    </template>
                 </div>
             </div>
         </Dialog>

src/types/components.d.ts

@@ -155,6 +155,7 @@ declare module 'vue' {
     ModelVideoStyles: typeof import('./../components/model-video/model-video-styles.vue')['default']
     MultColorPicker: typeof import('./../components/common/mult-color-picker/index.vue')['default']
     Navbar: typeof import('./../layout/components/navbar/index.vue')['default']
+    NoData: typeof import('./../components/base/noData/index.vue')['default']
     Padding: typeof import('./../components/base/padding/index.vue')['default']
     PageContent: typeof import('./../components/page-settings/page-content.vue')['default']
     PageSettings: typeof import('./../components/page-settings/index.vue')['default']