Transform

何时使用

代码转换专用组件（自带布局），直接使用可快速生成ui布局以及简单的转换逻辑，适用于大多数代码转换的情况，如JSON转YAML

代码演示

开箱即用的插件方案，开发者只需要关注转换逻辑即可

<template>
  <div style="height: 500px">
    <h-transform  :onChange="handleChange" :onMounted="handleMounted" :save-options="{autoSave:true,key:'input1'}"/>
  </div>
</template>

<script setup lang="ts">
import { Ref } from 'vue';

const handleChange = (inputValue: Ref<string>) => {
  // do something
  return '';
};

const handleMounted = (inputValue: Ref<string>) => {
  // Mounted hook
};
</script>

API

Props

属性	说明	类型	默认值
leftConfig	左编辑器配置	Config
rightConfig	右编辑器配置	Config
canChooseFile	是否支持选择文件	boolean	true
onMounted	挂载时回调函数	Function
onChange	输入框改变时回调函数	Function
onResultChange	结果改变时回调函数	Function
autoFillInputCondition	剪切板自动回填判断函数	Function	null
saveOptions	自动上传和初始化组件数据。注意⚠️：同一个工具下的多个key值需要保证唯一性。	object	autoSave:false,key:""

Config

属性	说明	类型
placeholder	空输入占位	string
lang	编辑器编程语言	CodeEditorLanguagesUnio
theme	编辑器主题	CodeEditorThemesUnio
title	编辑器标题	string
isTitleShow	是否展示编辑器标题	boolean

参数修改

editorLang -> lang

editorTheme -> theme

Slot

插槽名	说明	类型	默认值
left	左侧按钮插槽	Button
right	右侧按钮插槽	Button

Transform ​

何时使用 ​

代码演示 ​

API ​

Props ​

Config ​

Slot ​

Transform

何时使用

代码演示

API

Props

Config

Slot