text

src/modules/editor/components/CompUI/basicUI/Text/TextToolbar.tsx

@@ -9,18 +9,19 @@ import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { LinkOutlined } from "@ant-design/icons-vue";
 
 import { css } from "@linaria/core";
-import { Button, Divider, InputNumber, Select } from "ant-design-vue";
-import { defineComponent, nextTick } from "vue";
+import { Button, Divider } from "ant-design-vue";
+import { defineComponent } from "vue";
 import { any } from "vue-types";
 
 import ToolbarsUI from "../../formItems/ToolbarsUI";
 import {
   AlignComp,
-  LineHeightComp,
-  TextColor,
-  FontStyleComp,
   FontFamily,
   FontSize,
+  FontStyleComp,
+  LineHeightComp,
+  LinkButton,
+  TextColor,
 } from "./ToolbarComp";
 
 export const TextToolbar = defineComponent({
@@ -124,13 +125,7 @@ export const TextToolbar = defineComponent({
         label: "链接",
         dataIndex: "link",
         component: (props: any) => (
-          <Button
-            icon={<LinkOutlined />}
-            type="text"
-            onClick={() => {
-              console.log(props);
-            }}
-          ></Button>
+          <LinkButton icon={<LinkOutlined />} {...props} />
         ),
         itemProps: {
           class: "!mx-2px",
@@ -147,6 +142,7 @@ export const TextToolbar = defineComponent({
     ];
     const changeVal = (e: { dataIndex: string; value: any }) => {
       const editor = controls.textEditor;
+      console.log(e);
       if (!editor) {
         return;
       }

src/modules/editor/components/CompUI/basicUI/Text/ToolbarComp.tsx

@@ -10,9 +10,10 @@ import { Button, Dropdown, InputNumber, Menu, Tooltip } from "ant-design-vue";
 
 import Pickr from "@simonwep/pickr";
 import "@simonwep/pickr/dist/themes/nano.min.css";
-import { defineComponent, onMounted, reactive } from "vue";
+import { defineComponent, onMounted, reactive, watch } from "vue";
 import { any, string } from "vue-types";
 import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
+import { queenApi } from "queenjs";
 
 export const TextColor = defineComponent({
   props: {
@@ -21,6 +22,7 @@ export const TextColor = defineComponent({
   emits: ["change"],
   setup(props, { emit }) {
     let picker: any = null;
+
     function initPicker() {
       picker = Pickr.create({
         el: ".color_picker",
@@ -43,16 +45,23 @@ export const TextColor = defineComponent({
         },
       });
 
-      picker.on("change", (color: any) => {
-        const hexa = color.toHEXA().toString();
-        // emit("change", hexa);
-      });
+      // picker.on("change", (color: any) => {
+      //   const hexa = color.toHEXA().toString();
+      //   console.log("change", hexa);
+      //   // emit("change", hexa);
+      // });
       picker.on("save", (color: any) => {
         picker.hide();
         const hexa = color.toHEXA().toString();
         emit("change", hexa);
       });
     }
+    watch(
+      () => props.value,
+      () => {
+        picker.setColor(props.value);
+      }
+    );
     onMounted(() => {
       initPicker();
     });
@@ -178,6 +187,7 @@ export const FontStyleComp = defineComponent({
     const state = reactive({
       isOn: props.value || false,
     });
+
     const triggerStyle = () => {
       state.isOn = !state.isOn;
       emit("change", state.isOn);
@@ -236,6 +246,25 @@ export const FontSize = defineComponent({
     );
   },
 });
+export const LinkButton = defineComponent({
+  props: {
+    icon: any(),
+    value: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const showLinkInput = async () => {
+      const res = await queenApi.showInput({
+        title: "请输入链接地址",
+      });
+      emit("change", res);
+    };
+    return () => (
+      <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
+    );
+  },
+});
+
 const currStyle = css`
   color: @inf-primary-color;
   &:hover,