He3 Documents

简体中文

English

简体中文

English

Appearance

On this page

TextTransform ​

何时使用 ​

文本转换专用组件（自带布局），直接使用可快速生成ui布局以及简单的转换逻辑

代码演示 ​

普通转换 ​

output

通用的一输入一输出形式，可以通过 autoFillInputCondition 属性传入判断函数进行剪切板自动回填

<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>

文件转换 ​

output

通过属性 enableFile 启动文件转换模式，可以直接导入导出转换文件中的内容

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

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

双向转换 ​

通过属性 enableReverse 启动双向转换模式，可以同时支持双向文本转换

<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 ​

属性说明类型默认值
sampleData输入示例stringA Free, Modern Toolbox Built for Developers.
enableReverse是否使用反转换booleanfalse
enableFile是否支持文件转换booleanfalse
fileOutputAlert文件转换后提示文字string
transform转换回调函数Function
reverseTransform反转换回调函数Function
fileOutputName输出文件名字Functionfalse
autoFillInputCondition剪切板自动回填判断函数Functionnull
saveOptions自动上传和初始化组件数据。
注意⚠️：同一个工具下的多个key值需要保证唯一性。		objectautoSave:false,key:""

Expose ​

暴露属性名说明类型默认值
inputValue输入框中的值string
handleChange转换函数，可用于手动执行转换Function

Slot ​

插槽名说明类型默认值
option介于输入和输出框之间的转换选项插槽Component