Transform

When To Use

Special component for code conversion (with its own layout), which can be used directly to quickly generate ui layout and simple conversion logic, suitable for most code conversion situations, such as json to yaml

Examples

Out-of-the-box plug-in solution, developers only need to pay attention to the conversion logic

<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

Property	Description	Type	default
leftConfig	left editor configuration	Config
rightConfig	Right editor configuration	Config
canChooseFile	Whether to support file selection	boolean	true
onMounted	Callback function when mounted	Function
onChange	Callback function when the input box changes	Function
onResultChange	Callback function when the result changes	Function
autoFillInputCondition	Clipboard automatic backfill judgment function	Function	null
saveOptions	Automatically upload and initialize component data. Note ⚠️: Multiple key values under the same tool need to be unique.	object	autoSave:false,key:""

Config

Property	Description	Type
placeholder	Placeholder of input	string
lang	editor programming language	CodeEditorLanguagesUnio
theme	editor theme	CodeEditorThemesUnio
title	editor title	string
isTitleShow	Whether to show the editor title	boolean

Slot

Slot Name	Description	Type	default
left	left button slot	Button
right	right button slot	Button

Transform ​

When To Use ​

Examples ​

API ​

Props ​

Config ​

Slot ​