<template>
|
<ywDialog v-model="dialogIsShow" :title="title" width="50%" @dlgClosed="closeDialog" :showHeaderIcon="false" :showFooter="false">
|
<div style="height: 600px" class="relative">
|
<el-input
|
v-if="defaultLanguage === 'text'"
|
class="nowheel [&>textarea]:h-[600px]"
|
v-model="textValue"
|
type="textarea"
|
autocomplete="off"
|
resize="none"
|
>
|
</el-input>
|
<codemirror
|
v-else
|
class="overflow-auto"
|
style="height: 600px"
|
v-model="textValue"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="editorExtensions"
|
/>
|
|
<i
|
title="复制"
|
v-if="showCopy"
|
@click="copyInfo(textValue)"
|
class="ywifont ywicon-copy text-blue-400 !text-[25px] cursor-pointer absolute bottom-10 right-10"
|
></i>
|
<!-- 切换语言 -->
|
<el-select v-if="selectLanguageIsShow" size="small" class="w-[120px] absolute top-1 right-1" v-model="defaultLanguage">
|
<el-option v-for="item in language" :key="item" :value="item" :label="textTypeMap[item]"></el-option>
|
</el-select>
|
</div>
|
</ywDialog>
|
</template>
|
|
<script setup lang="ts" name="TextEditDialog">
|
import ywDialog from '/@/components/dialog/yw-dialog.vue';
|
|
import type { PropType } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
import { Codemirror } from 'vue-codemirror';
|
import type { TextType } from '../../input/codeEditor/types';
|
import { textTypeMap } from '../../input/codeEditor/types';
|
import { useEditorExtensions } from '../../input/codeEditor/useEditorExtensions';
|
import commonFunction from '/@/utils/commonFunction';
|
|
const editValue = defineModel<string>('editValue', {
|
type: String,
|
default: '',
|
});
|
const defaultLanguage = defineModel<TextType>('defaultLanguage', {
|
type: String as PropType<TextType>,
|
default: 'text',
|
});
|
|
const props = defineProps({
|
language: {
|
type: Array as PropType<TextType[]>,
|
default: () => ['text'],
|
},
|
|
title: {
|
type: String,
|
default: '',
|
},
|
showCopy: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
const selectLanguageIsShow = computed(() => {
|
return props.language.length > 1;
|
});
|
const { editorExtensions } = useEditorExtensions({
|
activeHighlight: defaultLanguage,
|
});
|
const dialogIsShow = defineModel({
|
type: Boolean,
|
});
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
};
|
|
const { copyText } = commonFunction();
|
|
const copyInfo = async (text) => {
|
copyText(text);
|
};
|
|
const textValue = ref('');
|
watch(
|
() => dialogIsShow.value,
|
(val) => {
|
if (val) {
|
textValue.value = editValue.value;
|
// 关闭时保存内容
|
} else {
|
editValue.value = textValue.value;
|
}
|
}
|
);
|
</script>
|
<style scoped lang="scss"></style>
|
