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

- 添加 showAction 控制编辑按钮显示
- 实现文本域聚焦和失焦时的编辑按钮显示和隐藏
-优化键盘弹出和收起时的编辑按钮显示逻辑
-修复文档中描述的产品问卷配置- 优化问卷设计页面的题目编辑功能

src/components/contenteditable.vue

@@ -1,39 +1,40 @@
 <template>
   <div
     ref="editor"
-    contenteditable="true"
+    :contenteditable="active"
     class="van-field"
-    @focus="showToolbar"
-    @blur="save"
     v-html="modelValue"
   ></div>
-  <div ref="editorAction" class="editor-action">
-    <button v-for="item in actions" :key="item.name" @click="funEvent(item)">{{ item.label }}</button>
+  <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 }}</button>
   </div>
 </template>
 
 <script setup>
-import { defineEmits, ref, onMounted, onBeforeUnmount } from 'vue';
+import { defineEmits, ref, onMounted, watch } from 'vue';
 
-defineProps({
+const props = defineProps({
   modelValue: {
     type: String,
     default: ''
+  },
+  active: {
+    type: Boolean,
+    default: false
   }
 });
 
 const editor = ref(null);
 const editorAction = ref(null);
 const emit = defineEmits(['update:modelValue']);
-let lastHeight = window.innerHeight;
-
 const save = (e) => {
-  emit('update:modelValue', e.target.innerHTML);
+  emit('update:modelValue', e.innerHTML);
 };
 
 const functions = {
+  // todo  点击按钮之后 如何判断   才能让按钮再次点击 不消失  获取重新聚焦 再次选中文本？
   boldModern: () => {
-    document.execCommand('bold', false, null);
+    document.execCommand('bold', true, null);
   },
   underLine: () => {
     document.execCommand('underline', false, null);
@@ -47,6 +48,21 @@ const funEvent = (item) => {
   functions[item.fun]();
 };
 
+watch(
+  () => props.active,
+  (newVal) => {
+    if (newVal) {
+      showAction.value = true;
+    } else {
+      save(editor.value);
+      setTimeout(() => {
+        showAction.value = false;
+      }, 100);
+    }
+  }
+);
+
+const showAction = ref(false);
 const actions = [
   {
     label: '加粗',
@@ -69,31 +85,19 @@ const actions = [
   }
 ];
 
-const showToolbar = () => {
-  editorAction.value.style.display = '';
-};
-
-const handleResize = () => {
-  const currentHeight = window.innerHeight;
-  if (currentHeight < lastHeight) {
-    // 键盘弹出
-    editorAction.value.style.display = '';
-  } else {
-    setTimeout(() => {
-      // 键盘收起
-      editorAction.value.style.display = 'none';
-    }, 100);
-  }
-  lastHeight = currentHeight;
-};
-
 onMounted(() => {
-  window.addEventListener('resize', handleResize);
+  editor.value.addEventListener('focus', () => {
+    showAction.value = true;
+  });
+
+  document.addEventListener('resize', () => {
+    showAction.value = false;
+  });
 });
 
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize);
-});
+// onBeforeUnmount(() => {
+//   editor.value.removeEventListener('resize', handleResize);
+// });
 </script>
 
 <style scoped lang="scss">