lianghongjie 1 year ago
parent
commit
9ff78ce18b

+ 31 - 2
src/modules/editor/components/CompUI/baseUI/Text.tsx

@@ -2,18 +2,47 @@ import { useEditor } from "@/modules/editor";
 import { defineComponent } from "vue";
 import { string } from "vue-types";
 import { View } from "./View";
+import { css } from "@linaria/core";
+import { Input } from "ant-design-vue";
 
 export const Text = defineComponent({
   props: {
     value: string().def("请输入文本"),
   },
   emits: ["update:value"],
-  setup(props) {
+  setup(props, { emit }) {
     const { store } = useEditor();
     return () => (
       <View>
-        <div contenteditable={store.editMode === "edit"}>{props.value}</div>
+        {/* <Input.TextArea
+          class={textStyle}
+          // onInput={(e) => {
+          //   emit("update:value", (e.target as HTMLElement).innerText);
+          // }}
+          value={props.value}
+          onChange={(e) => { 
+            emit("update:value", e.target.value)
+          }}
+        /> */}
+        <pre
+          class={textStyle}
+          contenteditable={store.editMode === "edit"}
+          onInput={(e: any) => console.log(e.target.innerText)}
+          onBlur={(e: any) => {
+            console.log(e.target.innerText);
+            emit("update:value", (e.target as HTMLElement).innerText);
+          }}
+        >
+          {props.value}
+        </pre>
       </View>
     );
   },
 });
+
+const textStyle = css`
+  &[contenteditable] {
+    outline: none;
+    border: none;
+  }
+`;

+ 9 - 3
src/modules/editor/components/Viewport/Slider/SliderRight.tsx

@@ -25,11 +25,17 @@ export default defineUI({
                     <div class="">
                       <div>{d.label}</div>
                       <Input
-                        value={get(editor.store.currComp?.value, d.dataIndex)}
+                        value={
+                          d.dataIndex
+                            ? get(editor.store.currComp?.value, d.dataIndex)
+                            : editor.store.currComp?.value
+                        }
                         onChange={(e) =>
                           set(
-                            editor.store.currComp?.value,
-                            d.dataIndex,
+                            d.dataIndex
+                              ? editor.store.currComp?.value
+                              : editor.store.currComp,
+                            d.dataIndex || "value",
                             e.target.value
                           )
                         }

+ 13 - 2
src/modules/editor/config/compUIOptions/index.ts

@@ -6,18 +6,29 @@ export const compUIOptions = createUIOptions({
     valueOpts: [
       {
         label: "文字内容",
-        dataIndex: "value",
+        dataIndex: "",
         dataType: "text",
       },
     ],
   },
 
+  Textarea: {
+    name: "富文本",
+    valueOpts: [
+      {
+        label: "内容",
+        dataIndex: "",
+        dataType: "textarea",
+      },
+    ],
+  },
+
   Image: {
     name: "图片",
     valueOpts: [
       {
         label: "图片链接",
-        dataIndex: "value",
+        dataIndex: "",
         dataType: "picture",
       },
     ],