mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-12 05:32:48 +00:00
优化 editor-preview
This commit is contained in:
parent
598ff64caa
commit
0f66f0f015
@ -50,9 +50,8 @@
|
|||||||
import { useClipboard } from "@vueuse/core";
|
import { useClipboard } from "@vueuse/core";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import { isObject, isString } from "lodash-es";
|
import { isObject, isString } from "lodash-es";
|
||||||
import { nextTick, type PropType, ref, computed } from "vue";
|
import { nextTick, ref, computed, type PropType } from "vue";
|
||||||
import { useCool } from "/@/cool";
|
import { useCool } from "/@/cool";
|
||||||
import "@wangeditor/editor/dist/css/style.css";
|
|
||||||
|
|
||||||
interface TabItem {
|
interface TabItem {
|
||||||
name: string;
|
name: string;
|
||||||
@ -64,7 +63,7 @@ const props = defineProps({
|
|||||||
modelValue: String,
|
modelValue: String,
|
||||||
title: String,
|
title: String,
|
||||||
name: {
|
name: {
|
||||||
type: String as PropType<"monaco" | "wang">,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
@ -109,20 +108,16 @@ const active = ref(0);
|
|||||||
// 列表
|
// 列表
|
||||||
const list = ref<TabItem[]>([]);
|
const list = ref<TabItem[]>([]);
|
||||||
|
|
||||||
// 标题
|
// 是否代码预览
|
||||||
const title = computed(() => {
|
const isCode = computed(() => {
|
||||||
return props.title || (props.name == "monaco" ? "代码预览" : "文本预览");
|
return props.name == "monaco";
|
||||||
});
|
});
|
||||||
|
|
||||||
// 是否可以滚动
|
// 是否可以滚动
|
||||||
const isScroll = computed(() => {
|
const isScroll = computed(() => !isCode.value);
|
||||||
return props.name == "wang";
|
|
||||||
});
|
|
||||||
|
|
||||||
// 是否可以复制
|
// 是否可以复制
|
||||||
const isCopy = computed(() => {
|
const isCopy = computed(() => isCode);
|
||||||
return props.name == "monaco";
|
|
||||||
});
|
|
||||||
|
|
||||||
// 编辑器配置
|
// 编辑器配置
|
||||||
const editConfig = computed(() => {
|
const editConfig = computed(() => {
|
||||||
@ -132,6 +127,11 @@ const editConfig = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 标题
|
||||||
|
const title = computed(() => {
|
||||||
|
return props.title || (isCode.value ? "代码预览" : "文本预览");
|
||||||
|
});
|
||||||
|
|
||||||
// 打开
|
// 打开
|
||||||
async function open(data?: string | TabItem[]) {
|
async function open(data?: string | TabItem[]) {
|
||||||
if (!data) {
|
if (!data) {
|
||||||
@ -169,7 +169,8 @@ async function onTabChange(index: any) {
|
|||||||
|
|
||||||
await nextTick();
|
await nextTick();
|
||||||
|
|
||||||
if (props.name == "monaco") {
|
// 格式化代码
|
||||||
|
if (isCode.value) {
|
||||||
refs.editor?.formatCode?.();
|
refs.editor?.formatCode?.();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,8 +5,8 @@ export default (): ModuleConfig => {
|
|||||||
label: "编辑器内容预览",
|
label: "编辑器内容预览",
|
||||||
description: "基于 monaco、wang 等编辑器的内容预览组件",
|
description: "基于 monaco、wang 等编辑器的内容预览组件",
|
||||||
author: "COOL",
|
author: "COOL",
|
||||||
version: "1.0.0",
|
version: "1.0.1",
|
||||||
updateTime: "2024-02-01",
|
updateTime: "2024-02-27",
|
||||||
demo: [
|
demo: [
|
||||||
{
|
{
|
||||||
name: "基础用法",
|
name: "基础用法",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user