修改事件穿透问题

src/views/agent/siteMobileSetting.vue

@@ -70,7 +70,16 @@
                         <div class="flex-left">
                             <GuipFormItem column="column" class="combo-formItem w510" label="绑定微信小程序" required="">
                                 <CustomDropdown slot="formDom" width="500px" v-model="bindWxXcxId" :options="xcxList[0]"
-                                    @change="changeBind(0)" displayKey="name" valueKey="xcx_id" placeholder="请选择">
+                                    @change="changeBind" displayKey="name" valueKey="xcx_id" placeholder="请选择">
+                                    <template #trigger>
+                                        <!-- 自定义触发元素 -->
+                                         <!-- 当前项需要单独的state存储一下 -->
+                                        <div v-if="bindWxXcxIdSelectItem" class="flex">
+                                            <span>{{ bindWxXcxIdSelectItem.name }}</span>
+                                            <div class="status-item divgreen"><span class="fontgreen">{{ bindWxXcxIdSelectItem.status_desc }}</span></div>
+                                        </div>
+                                        <span v-else class="desc">请选择</span>
+                                    </template>
                                     <!-- displayKey选中后要显示的字段 -->
                                     <template #normal>
                                         <div class="flex flex-between noraml-jump">
@@ -93,7 +102,7 @@
                                                 <div class="status-item divred mr-12">
                                                     <span class="fontred">{{ item.status_desc }}</span>
                                                 </div>
-                                                <img src="@/assets/site/form_qua_ic.svg" alt="" class="flex mr-5"> <span>失败原因</span>
+                                                <img src="@/assets/site/form_qua_ic.svg" alt="" class="flex mr-5"> <span @click="lookError">失败原因</span>
                                             </div>
                                         </div>
                                         <div class="flex appid">{{ item.appid }}</div>
@@ -104,7 +113,7 @@
                             <div class="mt24">
                                 <GuipFormItem column="column" class="combo-formItem w510" label="绑定支付宝小程序" required="">
                                 <CustomDropdown slot="formDom" width="500px" v-model="bindAliXcxId" :options="xcxList[2]"
-                                    @change="changeBind(2)" displayKey="name" valueKey="xcx_id" placeholder="请选择">
+                                    @change="changeBind1" displayKey="name" valueKey="xcx_id" placeholder="请选择">
                                     <template #normal>
                                         <div class="flex flex-between noraml-jump">
                                             <div class="left">
@@ -260,6 +269,7 @@ export default {
             xcxAppsecret: '',
             xcxType: '',
             addXcxTitle: '',
+            bindWxXcxIdSelectItem:null
         }
     },
     created() {
@@ -485,11 +495,26 @@ export default {
             })
         },
         changeBind(item) {
+            this.bindWxXcxIdSelectItem = {...item}
+            // this.bindWxXcxId = item.xcx_id;
+            console.log(this.bindWxXcxId);
+            console.log(this.bindAliXcxId);
+            console.log(item);
+        },
+        changeBind1(item) {
             // this.bindWxXcxId = item.xcx_id;
             console.log(this.bindWxXcxId);
             console.log(this.bindAliXcxId);
             console.log(item);
         },
+        lookError(e){
+            // 阻止默认事件 防冒泡
+            if (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            console.log('查看原因');
+        }
     }
 }
 </script>