|
@@ -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;
|
|
|
+ }
|
|
|
+`;
|