fix: codeEditor添加插槽

opentiny · Sep 23, 2024 · 9b70812 · 9b70812
1 parent 548e71e
commit 9b70812
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
@@ -6,7 +6,7 @@
         <svg-icon class="edit-icon" name="to-edit"></svg-icon>
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
-        <svg-icon v-if="showBtnIcon" class="edit-btn-icon" :name="svgName"></svg-icon>
+        <slot name="icon"></slot>
         {{ buttonLabel }}
       </tiny-button>
     </slot>
@@ -121,14 +121,6 @@ export default {
       // 代码编辑器上方提示：title显示简短的文字描述，demo为显示的示例，点击 “展开示例” 可查看
       type: Object,
       default: () => ({ title: '', demo: '' })
-    },
-    showBtnIcon: {
-      type: Boolean,
-      default: false
-    },
-    svgName: {
-      type: String,
-      default: 'to-edit'
     }
   },
   emits: ['save', 'open'],
@@ -271,10 +263,6 @@ export default {
       color: var(--ti-lowcode-meta-codeEditor-hover-color);
       border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
     }
-    .edit-btn-icon {
-      color: var(--ti-lowcode-common-text-main-color);
-      margin-right: 4px;
-    }
   }
 }
 

diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue
@@ -5,22 +5,28 @@
       title="输入配置"
       button-text="输入配置"
       language="json"
-      :showBtnIcon="true"
       :buttonShowContent="hasContent(inputValue)"
       single
       @save="saveInputValue"
-    ></meta-code-editor>
+    >
+      <template #icon>
+        <svg-icon class="edit-btn-icon" name="to-edit"></svg-icon>
+      </template>
+    </meta-code-editor>
     <div class="input-output-tips">传递给页面的参数(类似组件的输入属性)</div>
     <meta-code-editor
       :modelValue="outputValue"
       title="输出配置"
       button-text="输出配置"
       language="json"
-      :showBtnIcon="true"
       :buttonShowContent="hasContent(outputValue)"
       single
       @save="saveOutputValue"
-    ></meta-code-editor>
+    >
+      <template #icon>
+        <svg-icon class="edit-btn-icon" name="to-edit"></svg-icon>
+      </template>
+    </meta-code-editor>
     <div class="input-output-div">页面传递出的事件(类似组件触发的输出事件)</div>
 
     <tiny-checkbox class="selectHome" v-model="pageSettingState.currentPageData.isBody"
@@ -120,5 +126,9 @@ export default {
   .input-output-tips {
     margin-bottom: 12px;
   }
+  .edit-btn-icon {
+    color: var(--ti-lowcode-common-text-main-color);
+    margin-right: 6px;
+  }
 }
 </style>