在CodeEditor中添加占位符支持

This commit is contained in:
fofolee 2025-01-25 00:30:32 +08:00
parent dcd392ba47
commit 4595ea8ef0
4 changed files with 92 additions and 4 deletions

View File

@ -1,6 +1,11 @@
<template>
<div class="code-editor" :style="{ height: height }">
<div ref="editorContainer" class="editor-container"></div>
<div ref="editorContainer" class="editor-container" />
<div class="placeholder-wrapper" v-show="!value && placeholder">
<div class="placeholder">
{{ placeholder }}
</div>
</div>
</div>
</template>
@ -36,6 +41,11 @@ export default {
type: Object,
default: () => ({}),
},
// placeholder
placeholder: {
type: String,
default: "请输入...",
},
},
emits: ["update:modelValue", "change"],
data() {
@ -202,6 +212,11 @@ export default {
}
},
},
computed: {
showPlaceholder() {
return this.placeholder && (!this.value || this.value.trim() === "");
},
},
};
</script>
@ -211,10 +226,38 @@ export default {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.editor-container {
width: 100%;
height: 100%;
}
.placeholder-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-left: 45px;
pointer-events: none;
}
.placeholder {
font-size: 14px;
font-family: sans-serif;
color: #535353;
user-select: none;
font-style: italic;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
.code-editor:focus-within .placeholder {
opacity: 1;
}
.body--dark .placeholder {
color: #666;
}
</style>

View File

@ -291,6 +291,10 @@ export default {
runInTerminal,
} = options;
// true使
const runInTerminalOptions =
runInTerminal === true ? {} : runInTerminal;
const unescapeAndQuote = (str) => `"${str.replace(/\\"/g, '"')}"`;
if (!programs[language]) {
@ -304,7 +308,7 @@ export default {
const defaultCharset =
isWin && ["cmd", "powershell"].includes(language) ? "gbk" : "utf-8";
const { scriptCode = defaultCharset, outputCode = defaultCharset } =
charset;
@ -315,7 +319,7 @@ export default {
charset: { scriptCode, outputCode },
scptarg: argsStr,
},
runInTerminal,
runInTerminalOptions,
(result, err) => (err ? reject(err) : reslove(result))
);
false;

View File

@ -313,7 +313,7 @@ export const browserCommands = {
component: "CodeEditor",
icon: "code",
width: 12,
placeholder: "输入JavaScript代码",
placeholder: "输入JavaScript代码使用return返回结果",
},
{
topLabel: "要传递的参数",

View File

@ -1,3 +1,5 @@
import programs from "js/options/programs";
export const scriptCommands = {
label: "编程相关",
icon: "integration_instructions",
@ -26,6 +28,8 @@ export const scriptCommands = {
{
label: "JS脚本",
component: "CodeEditor",
placeholder:
"共享当前上下文支持utoolsquickcommandquickcomposer等接口",
width: 12,
},
],
@ -34,13 +38,50 @@ export const scriptCommands = {
value: "quickcommand.runCode",
label: "执行代码",
icon: "script",
isAsync: true,
outputVariable: "result",
saveOutput: true,
config: [
{
label: "脚本",
component: "CodeEditor",
placeholder: "需要本机安装了对应的解释器/编译器",
width: 12,
},
{
component: "OptionEditor",
width: 12,
options: {
language: {
label: "语言",
component: "QSelect",
icon: "language",
options: Object.keys(programs).slice(2, -1),
width: 8,
},
runInTerminal: {
label: "终端运行",
icon: "terminal",
component: "CheckButton",
width: 4,
},
args: {
topLabel: "参数",
icon: "data_array",
component: "ArrayEditor",
width: 12,
},
charset: {
label: "编码",
icon: "abc",
component: "DictEditor",
options: {
optionKeys: ["scriptCode", "outputCode"],
},
width: 12,
},
},
},
],
},
{