mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-26 04:09:21 +08:00
feat(editor): 增加代码块搜索,代码编辑器同步设置是否可编辑属性,修复不可编辑状态下弹窗无法关闭的问题
This commit is contained in:
parent
071619b9bd
commit
9e1fb42783
@ -54,6 +54,7 @@
|
||||
tabSize: 2,
|
||||
fontSize: 16,
|
||||
formatOnPaste: true,
|
||||
readOnly: !editable,
|
||||
}"
|
||||
></magic-code-editor>
|
||||
<div class="m-editor-content-bottom clearfix" v-if="editable">
|
||||
@ -115,7 +116,7 @@ watchEffect(async () => {
|
||||
|
||||
// 保存代码
|
||||
const saveCode = async (): Promise<boolean> => {
|
||||
if (!codeEditor.value || !codeConfig.value || !editable.value) return false;
|
||||
if (!codeEditor.value || !codeConfig.value || !editable.value) return true;
|
||||
|
||||
try {
|
||||
// 代码内容
|
||||
|
@ -1,10 +1,19 @@
|
||||
<template>
|
||||
<div class="m-editor-code-block-list">
|
||||
<slot name="code-block-panel-header">
|
||||
<div class="create-code-button">
|
||||
<el-button type="primary" size="small" @click="createCodeBlock" :disabled="!editable">新增代码块</el-button>
|
||||
<div class="code-header-wrapper">
|
||||
<el-input
|
||||
:class="[editable ? 'code-filter-input' : 'code-filter-input-no-btn']"
|
||||
size="small"
|
||||
placeholder="输入关键字进行过滤"
|
||||
clearable
|
||||
v-model="filterText"
|
||||
@change="filterTextChangeHandler"
|
||||
></el-input>
|
||||
<el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<el-divider class="divider" />
|
||||
</slot>
|
||||
|
||||
<!-- 代码块列表 -->
|
||||
@ -15,6 +24,7 @@
|
||||
empty-text="暂无代码块"
|
||||
:data="state.codeList"
|
||||
:highlight-current="true"
|
||||
:filter-node-method="filterNode"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<div :id="data.id" class="list-container">
|
||||
@ -44,14 +54,14 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject, reactive, watchEffect } from 'vue';
|
||||
import { computed, inject, reactive, ref, watchEffect } from 'vue';
|
||||
import { Close, Edit, View } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { flattenDeep, forIn, isEmpty, values } from 'lodash-es';
|
||||
|
||||
import Icon from '../../../components/Icon.vue';
|
||||
import type { CodeBlockContent, Services } from '../../../type';
|
||||
import { EditorMode, ListState } from '../../../type';
|
||||
import { CodeDslList, EditorMode, ListState } from '../../../type';
|
||||
|
||||
import codeBlockEditor from './CodeBlockEditor.vue';
|
||||
|
||||
@ -124,4 +134,18 @@ const deleteCode = (key: string) => {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const filterText = ref('');
|
||||
const tree = ref();
|
||||
|
||||
const filterNode = (value: string, data: CodeDslList): boolean => {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
return `${data.name}${data.id}`.indexOf(value) !== -1;
|
||||
};
|
||||
|
||||
const filterTextChangeHandler = (val: string) => {
|
||||
tree.value?.filter(val);
|
||||
};
|
||||
</script>
|
||||
|
@ -1,9 +1,20 @@
|
||||
.m-editor-code-block-list {
|
||||
padding-top: 20px;
|
||||
.create-code-button {
|
||||
margin-top: 5px;
|
||||
.code-header-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.code-filter-input {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.code-filter-input-no-btn {
|
||||
margin-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.create-code-button {
|
||||
margin-left: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
|
Loading…
x
Reference in New Issue
Block a user