feat(Design): 优化问卷设计样式和功能

- 实现选项功能 - 添加内容可编辑组件拖拽排序功能 - 优化题目和选项的样式 - 添加右键拖拽功能
2025-03-15 18:09:27 +08:00
parent b11a721284
commit 8d8772021e
5 changed files with 171 additions and 60 deletions
--- a/src/assets/css/public.scss
+++ b/src/assets/css/public.scss
@@ -32,7 +32,7 @@
  }
 }

-.van-switch--on{
+.van-switch--on {
  background: $theme-color;
 }

@@ -51,3 +51,51 @@
    background-color: rgba(0, 0, 0, 0.7) !important;
  }
 }
+
+.contenteditable {
+  width: 100%;
+}
+
+.contenteditable-input {
+  width: 100%;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 8px;
+  background: #fafbfc;
+  outline: 1px solid #f4f4f4;
+  font-size: 14px;
+}
+
+.contenteditable-label {
+  width: 100%;
+
+  //outline: 1px solid #ccc;
+  //border-bottom: 1px solid #ccc;
+}
+
+.contenteditable-question-title {
+  & .van-cell__title {
+    position: relative;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      bottom: -2px;
+      box-sizing: border-box;
+      width: 100%;
+      border-bottom: 0.0267rem solid #ebedf0;
+      pointer-events: none;
+      transform: scaleY(0.5);
+    }
+
+    &:focus-within::after {
+      border-bottom-color: $theme-color;
+    }
+
+    & .contenteditable-label {
+      & :focus {
+        //color: green;
+      }
+    }
+  }
+}
--- a/src/components/contenteditable.vue
+++ b/src/components/contenteditable.vue
@@ -1,11 +1,16 @@
 <template>
-  <p
-    ref="editor"
-    :contenteditable="active"
-    class="van-field"
-    :class="className"
-    v-html="modelValue"
-  ></p>
+  <div class="flex contenteditable align-center space-between" :class="className">
+    <p
+      ref="editor"
+      :contenteditable="active"
+      class="van-field contenteditable-content"
+      v-html="modelValue"
+    ></p>
+    <div class="right-icon ml10">
+      <slot name="right-icon"></slot>
+    </div>
+  </div>
+
  <div v-if="showAction && active" ref="editorAction" class="editor-action">
    <button v-for="item in actions" :key="item.name" @click="funEvent(item, $event)">
      {{ item.label }}
@@ -138,6 +143,14 @@ onMounted(() => {
 </script>

 <style scoped lang="scss">
+.contenteditable-content {
+  width: 100%;
+}
+
+.right-icon {
+  color: #c4c9d4;
+}
+
 .editor-action {
  position: fixed;
  bottom: 0;
--- a/src/views/Design/Index.vue
+++ b/src/views/Design/Index.vue
@@ -4,7 +4,7 @@
      v-if="questionInfo.questions.length > 0"
      v-model:data="questionInfo.questions"
      item-key="id"
-      handle=".moverQues"
+      handle=".moveQuestion"
      chosenClass="chosen"
      animation="300"
      :scroll="true"
@@ -105,8 +105,11 @@
                  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>
+                    <div
+                      class="flex align-center action-item theme-color"
+                      @click="actionEvent(act, el)"
+                    >
+                      <van-icon :name="act.icon" class="icons"></van-icon>
                      <span class="ml10">{{ act.label }}</span>
                    </div>
                  </template>
@@ -269,7 +272,7 @@ const actionOptions = [
    actions: [
      {
        label: '添加选项',
-        icon: 'add',
+        icon: 'add-o',
        fun: 'radioAddOption'
      }
    ]
@@ -280,12 +283,12 @@ const actionOptions = [
    actions: [
      {
        label: '添加行标签',
-        icon: 'add',
+        icon: 'add-o',
        fun: 'addMatrixRowOption'
      },
      {
        label: '添加列标签',
-        icon: 'add',
+        icon: 'add-o',
        fun: 'addMatrixColumnOption'
      }
    ]
@@ -448,7 +451,11 @@ onMounted(() => {
  //background-color: #e9eef3;
  color: #333;

-  .slot-actions {
+  ::v-deep .slot-actions {
+    & .action-item {
+      font-size: 15px;
+    }
+
    & .action-item + .action-item {
      margin-left: 10px;
    }
--- a/src/views/Design/components/ActionCompoents/OptionAction.vue
+++ b/src/views/Design/components/ActionCompoents/OptionAction.vue
@@ -1,15 +1,31 @@
 <template>
  <div class="option-action">
-    <template v-for="(item, index) in data" :key="index">
-      <div class="flex align-center option-action-container">
-        <slot name="item" :element="item" :index="index"></slot>
-        <span v-if="active" class="flex">
-          <van-icon class-prefix="mobilefont" name="setting " @click="openMoveModel(item, index)" />
-          <van-icon class-prefix="mobilefont" name="gengduo " @click="openOptionActionModel(item, index)" />
-          <van-icon class-prefix="mobilefont" name="del1 " @click="deleteOption(index)" />
-        </span>
-      </div>
-    </template>
+    <draggable
+      v-model:data="data"
+      item-key="option_index"
+      :handle="handle"
+      chosenClass="chosen"
+      animation="300"
+      :scroll="true"
+    >
+      <template #item="{ element, index }">
+        <div class="flex align-center option-action-container">
+          <slot name="item" :element="element" :index="index"></slot>
+          <span v-if="active" class="flex">
+            <!--<van-icon class-prefix="mobilefont"
+            name="setting "
+              @click="openMoveModel(element, index)
+              "/>-->
+            <van-icon
+              class-prefix="mobilefont"
+              name="gengduo "
+              @click="openOptionActionModel(element, index)"
+            />
+            <van-icon class-prefix="mobilefont" name="del1 " @click="deleteOption(index)" />
+          </span>
+        </div>
+      </template>
+    </draggable>
  </div>
  <!--  操作项弹窗-->
  <van-action-sheet v-model:show="show">
@@ -66,15 +82,8 @@
 import CheckboxAction from './components/OptionItemAction/CheckboxAction.vue';
 import { ref } from 'vue';
 import { showConfirmDialog } from 'vant';
+import Draggable from '@/views/Design/components/Draggable.vue';
 const props = defineProps({
-  data: {
-    type: Object,
-    default: () => {
-      return {
-        stem: ''
-      };
-    }
-  },
  active: {
    type: Boolean,
    default: false
@@ -84,9 +93,17 @@ const props = defineProps({
    default: () => {
      // 空
    }
+  },
+  handle: {
+    type: String,
+    default: ''
  }
 });

+const data = defineModel('data', {
+  type: Array,
+  default: () => []
+});
 const actions = [
  { name: '上移选项', action: 'up' },
  { name: '下移选项', action: 'down' }
@@ -109,31 +126,31 @@ const openOptionActionModel = (item, index) => {
  activeOption.value = item;
  activeIndex.value = index;
 };
-const openMoveModel = (item, index) => {
-  moveShow.value = true;
-  activeOption.value = item;
-  activeIndex.value = index;
-};
+// const openMoveModel = (item, index) => {
+//   moveShow.value = true;
+//   activeOption.value = item;
+//   activeIndex.value = index;
+// };
 // 上下移动
 const optionMove = (action) => {
  switch (action.action) {
-  case 'up':
-    if (activeIndex.value === 0) {
-      moveShow.value = false;
-      return false;
-    }
-    // 向上移动
-    element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value -= 1;
-    break;
-  case 'down':
-    if (activeIndex.value === element.value.length - 1) {
-      moveShow.value = false;
-      return false;
-    }
-    element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value += 1;
-    break;
+    case 'up':
+      if (activeIndex.value === 0) {
+        moveShow.value = false;
+        return false;
+      }
+      // 向上移动
+      element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      activeIndex.value -= 1;
+      break;
+    case 'down':
+      if (activeIndex.value === element.value.length - 1) {
+        moveShow.value = false;
+        return false;
+      }
+      element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      activeIndex.value += 1;
+      break;
  }
 };

@@ -164,7 +181,7 @@ const deleteOption = (index) => {
  & .option-action-container {
    font-size: 16px;

-    & .mobilefont{
+    & .mobilefont {
      font-size: 16px;
    }

--- a/src/views/Design/components/Questions/Choice.vue
+++ b/src/views/Design/components/Questions/Choice.vue
@@ -4,13 +4,18 @@
    :label="element.stem"
    :required="element.config.is_required === 1"
    label-align="top"
-    class="base-select"
+    class="contenteditable-question-title base-select"
  >
    <template #left-icon>
      {{ index + 1 }}
    </template>
    <template #label>
-      <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
+      <contenteditable
+        v-model="element.stem"
+        className="contenteditable-label"
+        :active="active"
+        @blur="emitValue"
+      ></contenteditable>
    </template>
    <template #input>
      <template v-for="(item, optionIndex) in element.options" :key="item.id">
@@ -19,6 +24,7 @@
            v-model:data="element.options[optionIndex]"
            :active="active"
            :question="element"
+            handle=".moverQues"
          >
            <template #item="{ element: it, index: itIndex }">
              <van-radio
@@ -31,7 +37,17 @@
                <!--       自定义文本         -->
                <template #default>
                  <div class="flex align-center van-cell">
-                    <contenteditable v-model="it.option" :active="active"></contenteditable>
+                    <contenteditable
+                      v-model="it.option"
+                      className="contenteditable-input"
+                      :active="active"
+                    >
+                      <template #right-icon>
+                        <div v-if="active" class="moverQues">
+                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
+                        </div>
+                      </template>
+                    </contenteditable>
                    <div v-if="it.is_other">
                      <input class="other-input" type="text" />
                    </div>
@@ -57,7 +73,17 @@
              >
                <template #default>
                  <div class="flex align-center van-cell">
-                    <contenteditable v-model="it.option" :active="active"></contenteditable>
+                    <contenteditable
+                      v-model="it.option"
+                      className="contenteditable-input"
+                      :active="active"
+                    >
+                      <template #right-icon>
+                        <div v-if="active" class="moverQues">
+                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
+                        </div>
+                      </template>
+                    </contenteditable>
                    <div v-if="it.is_other">
                      <input class="other-input" type="text" />
                    </div>