ScriptInput 脚本编辑器

TIP

由于脚本编辑功能的使用场景有限，我们在打包时并没有将代码编辑器相关的依赖打包进项目。
因此，当您需要使用 ScriptInput 组件时，需要手动安装 @easyui/vue-code-editor 依赖。

基本用法

点击查看代码

<template>
  <s-script-input v-model="scriptText"></s-script-input>
</template>

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

  const scriptText = ref("");
</script>

输入框回显

点击查看代码

<template>
  <s-script-input v-model="scriptText" :inputEcho="inputEchoValue" placeholder="请设置脚本" clearable></s-script-input>
</template>

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

  const scriptText = ref("");

  const inputEchoValue = (value: string) => {
    return value ? value : "";
  };
</script>

编辑器扩展

点击查看代码

<template>
  <s-script-input v-model="scriptText">
    <template #before>function test() {</template>
    <template #after>}</template>
  </s-script-input>
</template>

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

  const scriptText = ref("");
</script>

内容只读

点击查看代码

<template>
  <s-script-input v-model="scriptText" :input-echo="() => '点击设置脚本'" readonly></s-script-input>
</template>

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

  const scriptText = ref(`const username = "Tom";`);
</script>

Props

Slots