feat: 🚀 tabs
This commit is contained in:
@@ -55,7 +55,14 @@
|
||||
@tab-change="handleTabChange"
|
||||
>
|
||||
<!-- 标签页：标题支持编辑 -->
|
||||
<el-tab-pane :label="item.title" :name="item.key" v-for="(item, index) in tabsData" :key="item.key">
|
||||
<el-tab-pane
|
||||
:label="item.title"
|
||||
:name="item.key"
|
||||
v-for="(item, index) in tabsData"
|
||||
:key="item.key"
|
||||
@keydown.delete.stop
|
||||
@keydown.backspace.stop
|
||||
>
|
||||
<template #label>
|
||||
<div class="tab-title-edit">
|
||||
<!-- 文字显示状态 -->
|
||||
@@ -64,14 +71,16 @@
|
||||
</span>
|
||||
<!-- 输入框编辑状态 -->
|
||||
<el-input
|
||||
@click.stop
|
||||
@keydown.delete.stop
|
||||
@keydown.backspace.stop
|
||||
v-else
|
||||
v-model="item.title"
|
||||
max-length=""
|
||||
:ref="el => (editInputRefs[index] = el)"
|
||||
size="small"
|
||||
class="title-input"
|
||||
@blur="finishEditTitle(index)"
|
||||
@keyup.enter="finishEditTitle(index)"
|
||||
@keyup.esc="cancelEditTitle(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -105,13 +114,13 @@ import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
import { h } from "@/utils/url";
|
||||
// import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
import { ElNotification } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
// 字体配置
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||
@@ -145,7 +154,7 @@ const tabsData = ref([]);
|
||||
const tabEditors = ref([]);
|
||||
// 标题编辑输入框的ref
|
||||
const editInputRefs = ref([]);
|
||||
|
||||
const currentEditingTabsRef = ref(null);
|
||||
// Props
|
||||
const props = defineProps({
|
||||
content: { type: String, default: "" },
|
||||
@@ -299,7 +308,7 @@ const handleHttpUpload = async options => {
|
||||
imageListDb.value.forEach(item => {
|
||||
const length = quill.getLength() - 1;
|
||||
quill.insertEmbed(length, "customImage", {
|
||||
url: h + item.path,
|
||||
url: item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
quill.setSelection(length + 1);
|
||||
@@ -338,7 +347,7 @@ const handleVideoUpload = async evt => {
|
||||
let length = quill.selection.savedRange.index;
|
||||
const { data } = await uploadVideo(formData);
|
||||
quill.insertEmbed(length, "customVideo", {
|
||||
url: h + data.path,
|
||||
url: data.path,
|
||||
id: generateUUID()
|
||||
});
|
||||
uploadFileVideo.value.value = "";
|
||||
@@ -357,6 +366,9 @@ const handleTabChange = key => {
|
||||
// 标签页增删事件
|
||||
const handleTabsEdit = (targetKey, action) => {
|
||||
if (action === "add") {
|
||||
if (tabsData.value.length > 5) {
|
||||
return useMsg("error", "标签页已达上限 !");
|
||||
}
|
||||
// 新增标签页：生成唯一key，默认标题，初始不处于编辑状态
|
||||
const newKey = `tab_${generateUUID()}`;
|
||||
const newIndex = tabsData.value.length;
|
||||
@@ -440,15 +452,33 @@ const setTabsInfo = () => {
|
||||
const handleBeforeClose = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
//确认
|
||||
// 确认按钮点击事件（修改后）
|
||||
const handleQR = () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (quill) {
|
||||
const range = quill.getSelection(true);
|
||||
quill.insertEmbed(range.index, "tabs", tabsData.value);
|
||||
quill.setSelection(range.index + 1);
|
||||
setTabsInfo();
|
||||
if (!quill) return;
|
||||
if (!tabsData.value.length) {
|
||||
return useMsg("error", "标签页内容为空 !");
|
||||
}
|
||||
const range = quill.getSelection(true);
|
||||
|
||||
// 判断是否是编辑已有标签页（通过 currentEditingTabsRef 是否有值）
|
||||
if (currentEditingTabsRef.value) {
|
||||
// 1. 编辑模式：更新原有标签页组件
|
||||
const blot = currentEditingTabsRef.value;
|
||||
// 更新 blot 的数据（触发 DOM 更新）
|
||||
blot.updateContents(tabsData.value); // 需要在 TabsBlot 中添加 updateContents 方法
|
||||
// 清除编辑状态标记
|
||||
currentEditingTabsRef.value = null;
|
||||
} else {
|
||||
// 2. 新增模式：插入新的标签页组件
|
||||
quill.insertEmbed(range.index, "tabs", tabsData.value);
|
||||
// 关键：在标签页前方插入一个空段落（确保顶部有空间）
|
||||
// quill.insertText(range.index, "\n"); // 插入换行
|
||||
quill.setSelection(range.index + 1);
|
||||
quill.insertText(range.index, "\n"); // 插入换行
|
||||
}
|
||||
// 关闭弹窗并清空临时数据
|
||||
setTabsInfo();
|
||||
};
|
||||
//取消
|
||||
const handleQX = () => {
|
||||
@@ -462,9 +492,49 @@ const initTitle = () => {
|
||||
if (tip) tip.setAttribute("title", item.title);
|
||||
});
|
||||
};
|
||||
// 定义 loadTabsDataToEditor 函数
|
||||
const loadTabsDataToEditor = tabs => {
|
||||
// 清空现有数据
|
||||
tabsData.value = [];
|
||||
// 转换原始标签数据为编辑所需格式（添加key和编辑状态）
|
||||
tabs.forEach((tab, index) => {
|
||||
tabsData.value.push({
|
||||
key: `tab_${generateUUID()}`, // 生成唯一key
|
||||
title: tab.title || `标签${index + 1}`, // 避免空标题
|
||||
content: tab.content || "", // 标签页内容
|
||||
isEditing: false // 编辑状态标记
|
||||
});
|
||||
});
|
||||
// 激活第一个标签页（如果有数据）
|
||||
nextTick(() => {
|
||||
if (tabsData.value.length > 0) {
|
||||
activeName.value = tabsData.value[0].key;
|
||||
activeEditor.value = "tab-0";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
// 监听编辑按钮点击事件
|
||||
const editorEl = document.querySelector(".ql-editor");
|
||||
if (editorEl) {
|
||||
editorEl.addEventListener("edit-tabs", e => {
|
||||
console.log(1232, "测试");
|
||||
console.log(e.detail.blot, "=e.detail=");
|
||||
const tabsData = TabsBlot.value(e.detail.blot.domNode);
|
||||
console.log(tabsData, "=tabsData=");
|
||||
if (tabsData.length > 0) {
|
||||
// 保存当前编辑的标签页引用
|
||||
currentEditingTabsRef.value = e.detail.blot;
|
||||
console.log(currentEditingTabsRef.value, "=currentEditingTabsRef.value =");
|
||||
// 加载数据到弹窗
|
||||
loadTabsDataToEditor(tabsData);
|
||||
// 显示弹窗
|
||||
outerVisible.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
@@ -488,63 +558,21 @@ defineExpose({
|
||||
user-select: text !important;
|
||||
}
|
||||
|
||||
/* 标签页样式 */
|
||||
// /* 标签页样式 */
|
||||
.quill-tabs {
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 用伪元素添加图标（可替换为自己的图标） */
|
||||
// /* 用伪元素添加图标（可替换为自己的图标） */
|
||||
.ql-tabs::before {
|
||||
font-size: 16px;
|
||||
content: "T"; /* 用 emoji 或字体图标 */
|
||||
}
|
||||
.quill-tab-list {
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
.quill-tab-button {
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.quill-tab-button.active {
|
||||
color: #007bff;
|
||||
background-color: white;
|
||||
border-bottom: 2px solid #007bff;
|
||||
}
|
||||
.quill-tab-content-list {
|
||||
padding: 15px;
|
||||
}
|
||||
.quill-tab-content {
|
||||
display: none;
|
||||
}
|
||||
.quill-tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 标签页标题编辑样式 */
|
||||
.tab-title-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title-text {
|
||||
display: inline-block;
|
||||
min-width: 60px;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title-input {
|
||||
width: 100px;
|
||||
margin: -2px 0; /* 与标签对齐 */
|
||||
}
|
||||
.title-input {
|
||||
width: 100px;
|
||||
margin: -2px 0; /* 与标签对齐 */
|
||||
}
|
||||
</style>
|
||||
./quill-image1111
|
||||
|
||||
Reference in New Issue
Block a user