hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(component): 优化 contenteditable组件功能

Browse Source 
- 添加 showAction 控制编辑按钮显示
- 实现文本域聚焦和失焦时的编辑按钮显示和隐藏
-优化键盘弹出和收起时的编辑按钮显示逻辑
-修复文档中描述的产品问卷配置- 优化问卷设计页面的题目编辑功能
This commit is contained in:
陈昱达
2025-03-07 16:56:25 +08:00
parent ae04b89a62
commit 8f903e3869
11 changed files with 930 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/views/Design/Index.vue
View File

@@ -1,22 +1,32 @@
<template>
<div class="design-create">
<draggable
v-model:data="questionInfo.questions" item-key="id" handle=".moverQues" chosenClass="chosen"
animation="300" :scroll="true"
v-model:data="questionInfo.questions"
item-key="id"
handle=".moverQues"
chosenClass="chosen"
animation="300"
:scroll="true"
>
<template #item="{ element, index }">
<choose-question
:element="element" :questions="questionInfo.questions" :index="index"
:chooseQuestionId="chooseQuestionId" @get-choose-question-id="getChooseQuestionId"
:element="element"
:questions="questionInfo.questions"
:index="index"
:chooseQuestionId="chooseQuestionId"
@get-choose-question-id="getChooseQuestionId"
>
<!-- 选择题 -->
<Choice
v-if="element.question_type === 1 || element.question_type === 2" :element="element"
v-if="element.question_type === 1 || element.question_type === 2"
:element="element"
:active="chooseQuestionId === element.id"
></Choice>
<!-- 填空题 -->
<Completion
v-if="element.question_type === 4" :element="element" :active="chooseQuestionId === element.id"
v-if="element.question_type === 4"
:element="element"
:active="chooseQuestionId === element.id"
sn="lXEBBpE2"
></Completion>
@@ -26,37 +36,54 @@
element.question_type === 8 ||
element.question_type === 9 ||
element.question_type === 10
" :element="element" :active="chooseQuestionId === element.id"
"
:element="element"
:active="chooseQuestionId === element.id"
/>
<!-- 签名题 -->
<sign-question
v-if="element.question_type === 22" :element="element"
v-if="[9, 10, 22].includes(element.question_type)"
:element="element"
:active="chooseQuestionId === element.id"
></sign-question>
/>
<!-- 文件上传题 -->
<file-upload
v-if="element.question_type === 18" :element="element" :active="chooseQuestionId === element.id"
v-if="element.question_type === 18"
:element="element"
:active="chooseQuestionId === element.id"
></file-upload>
<!-- 打分题 -->
<Rate
v-if="element.question_type === 5" :element="element" :active="chooseQuestionId === element.id"
v-if="element.question_type === 5"
:element="element"
:active="chooseQuestionId === element.id"
sn="lXEBBpE2"
/>
<!--图文-->
<TextWithImages
v-if="element.question_type === 6" :element="element"
v-if="element.question_type === 6"
:element="element"
:active="chooseQuestionId === element.id"
/>
<!--图文-->
<NPS
v-if="element.question_type === 106"
:element="element"
:active="chooseQuestionId === element.id"
/>
<!--组件底部左侧操作-->
<template #action="{ element: el }">
<div class="flex slot-actions">
<template v-for="(item, optionIndex) in actionOptions">
<div v-if="item.question_type.includes(el.question_type)" :key="optionIndex" class="flex">
<div
v-if="item.question_type.includes(el.question_type)"
:key="optionIndex"
class="flex"
>
<template v-for="(act, actIndex) in item.actions" :key="actIndex">
<div class="flex align-center action-item" @click="actionEvent(act, el)">
<van-icon :name="act.icon"></van-icon>
@@ -72,8 +99,11 @@
<!-- {{ element.question_type }}-->
<!-- {{questionInfo.survey.pages.length}}-->
<paging
v-if="!element.question_type && questionInfo.survey.pages.length > 1" :info="element" :index="index"
:active="pageIsActive(activeIndex, questionInfo.questions, element.page)" @click.stop=""
v-if="!element.question_type && questionInfo.survey.pages.length > 1"
:info="element"
:index="index"
:active="pageIsActive(activeIndex, questionInfo.questions, element.page)"
@click.stop=""
/>
</template>
</draggable>
@@ -94,6 +124,8 @@ import Rate from './components/Questions/Rate.vue';
import TextWithImages from '@/views/Design/components/Questions/TextWithImages.vue';
import SignQuestion from './components/Questions/SignQuestion.vue';
import FileUpload from './components/Questions/FileUpload.vue';
import NPS from '@/views/Design/components/Questions/NPS.vue';
const activeIndex = ref(-1);
/**
* 工具函数
@@ -148,9 +180,12 @@ const store = storeToRefs(counterStore);
const chooseQuestionId = ref('');
const questionInfo = ref(store.questionsInfo.value);
const emit = defineEmits(['getActiveQuestion']);
// 获取选中的题目的ID
const getChooseQuestionId = (questionItem) => {
chooseQuestionId.value = questionItem.id;
// 向外传出选中的题目
emit('getActiveQuestion', questionItem);
};
// 组件对应的操作
const actionOptions = [
@@ -238,12 +273,12 @@ onMounted(() => {
}
.design-create {
min-height: calc(100vh);
//min-height: calc(100vh);
background-color: #e9eef3;
color: #333;
.slot-actions {
& .action-item+.action-item {
& .action-item + .action-item {
margin-left: 10px;
}
}