TextTransform

When To Use

Special component for text conversion (with its own layout), which can be used directly to quickly generate ui layout and simple conversion logic

Examples

Common Transform

The general one-input-output form can be passed to the judgment function through the auto fill input condition property to automatically backfill the clipboard

<template>
  <h-text-transform
    :sampleData="sampleData"
    :transform="transform"
    :autoFillInputCondition="isJWT"
  />
</template>

<script setup lang="ts">
const sampleData = 'Example';
const transform = (inputValue: string): string => {
  // do something
  // 将转换结果返回即可在右边进行展示，注意返回结果必须是字符串
  return '';
};
const isJWT = (text: string) => {
  const reg = /^e([A-Za-z0-9_-]+)\.e([A-Za-z0-9_-]+)\.([A-Za-z0-9_-]+)$/;
  return reg.test(text);
};
</script>

File Transform

text document

Start the file conversion mode through property enableFile, you can directly import and export the content in the converted file

<template>
  <h-text-transform
    enableFile
    fileOutputAlert="导出成功"
    :transform="transform"
  />
</template>

<script setup lang="ts">
const transform = (inputValue: string): string => {
  // do something
  // 将转换结果返回即可在右边进行展示，注意返回结果必须是字符串
  return '';
};
</script>

Two-way Transform

Start the bidirectional conversion mode through property enableReverse, which can support bidirectional text conversion at the same time

<template>
  <h-text-transform
    enableReverse
    :transform="transform"
    :sampleData="sampleData"
    :reverseTransform="reverseTransform"
  />
</template>

<script setup lang="ts">

const sampleData = 'Example';
const transform = (inputValue: string) => {
  // do something
  return ''
}


const reverseTransform = () => {
  // do something
  // 将转换结果返回即可在左边进行展示，注意返回结果必须是字符串
}

</script>

API

Props

Property	Description	Type	default
sampleData	Input example	string	A Free, Modern Toolbox Built for Developers.
enableReverse	Whether to use inverse conversion	boolean	false
enableFile	Whether to support file conversion	boolean	false
fileOutputAlert	Prompt text after file conversion	string
transform	Conversion callback function	Function
reverseTransform	Inverse conversion callback function	Function
fileOutputName	output file name	Function	false
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:""

Expose

Expose Property	Description	Type	default
inputValue	the value in the input box	string
handleChange	Conversion functions, which can be used to perform conversions manually	Function

Slot

Slot Name	Description	Type	default
option	Transform options slot between input and output boxes	Component

TextTransform ​

When To Use ​

Examples ​

Common Transform ​

File Transform ​

Two-way Transform ​

API ​

Props ​

Expose ​

Slot ​