脱敏算法列表组件

src/components/collapseView/index.vue

 <script setup lang="ts" name="collapseView">
 import { Collapse, Panel } from 'view-ui-plus';
 
+const emit = defineEmits(["add", "view", "mainDeletion", "default", "childDelete", "change"]);
+
 const props = defineProps<{
   modelValue: boolean;
   text?: string;
@@ -9,7 +11,35 @@ const props = defineProps<{
   cancel?: string;
 }>();
 
-const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
+// 新增
+const addClick = () => { 
+  console.log("add");
+}
+
+// 查看
+const viewClick = () => { 
+  console.log("view");
+}
+
+// 主删除
+const mainDeletion = () => { 
+  console.log("mainDeletion");
+}
+
+// 子级监听
+const itemClick = () => { 
+  console.log("change");
+}
+
+// 默认项
+const defaultClick = () => { 
+  console.log("default");
+}
+
+// 子删除
+const childDelete = () => { 
+  console.log("childDelete");
+}
 </script>
 
 <template>
@@ -17,17 +47,26 @@ const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
     <Panel name="1">
       测试数据域
       <span class="collapse-item__btns--box">
-        <el-icon color="rgb(253, 84, 81)" :size="16">
+        <el-icon color="rgb(253, 84, 81)" :size="16" @click.stop="addClick()">
           <circle-plus-filled />
         </el-icon>
+        <el-icon color="#2c9ef7" :size="16" style="margin-left: 8px;" @click.stop="viewClick()">
+          <View />
+        </el-icon>
+        <el-icon color="rgb(13, 215, 141)" :size="16" style="margin-left: 8px;" @click.stop="mainDeletion()">
+          <delete />
+        </el-icon>
       </span>
       <template #content>
         <div>
-          <div class="rule__item">
+          <div class="rule__item" @click="itemClick()">
             <span>aaaa</span>
             <div class="default"></div>
             <div class="rule__item__btns">
-              <el-icon color="rgb(13, 215, 141)" :size="16">
+              <el-icon color="#2c9ef7" :size="15" style="margin-right: 8px;" @click.stop="defaultClick()">
+                <circle-check  />
+              </el-icon>
+              <el-icon color="rgb(13, 215, 141)" :size="15" @click.stop="childDelete()">
                 <delete />
               </el-icon>
             </div>