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