|
@@ -30,6 +30,7 @@ import {
|
|
|
} from "vue";
|
|
|
import { any, bool, func, number, object, string } from "vue-types";
|
|
|
import Slider from "../../formItems/Slider";
|
|
|
+import NewColorPicker from "../../formItems/NewColorPicker";
|
|
|
interface ColumnItem {
|
|
|
label?: string;
|
|
|
component?: ((...args: any[]) => any) | Record<string, any>;
|
|
@@ -45,8 +46,6 @@ export const TextColor = defineComponent({
|
|
|
},
|
|
|
emits: ["change"],
|
|
|
setup(props, { emit }) {
|
|
|
- let pickerRef = ref();
|
|
|
-
|
|
|
const state = reactive({
|
|
|
color: props.value,
|
|
|
});
|
|
@@ -56,29 +55,17 @@ export const TextColor = defineComponent({
|
|
|
state.color = props.value;
|
|
|
}
|
|
|
);
|
|
|
- const colorChange = (e: any) => {
|
|
|
- const hexa = e.target.value;
|
|
|
- emit("change", hexa);
|
|
|
- state.color = hexa;
|
|
|
+ const colorChange = (value: string) => {
|
|
|
+ emit("change", value);
|
|
|
+ state.color = value;
|
|
|
};
|
|
|
|
|
|
return () => (
|
|
|
- <div
|
|
|
- class={ColorPicker}
|
|
|
- onClick={() => {
|
|
|
- pickerRef?.value.click();
|
|
|
- }}
|
|
|
- >
|
|
|
- <div class="color_picker" style={{ backgroundColor: state.color }}>
|
|
|
- <input
|
|
|
- type="color"
|
|
|
- class="color_input"
|
|
|
- ref={pickerRef}
|
|
|
- value={state.color}
|
|
|
- onInput={_.debounce(colorChange, 300)}
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <NewColorPicker
|
|
|
+ value={state.color}
|
|
|
+ onChange={colorChange}
|
|
|
+ showGradient={false}
|
|
|
+ />
|
|
|
);
|
|
|
},
|
|
|
});
|
|
@@ -333,7 +320,6 @@ export const TextStroke = defineComponent({
|
|
|
}
|
|
|
);
|
|
|
const formatVal = (value: any) => {
|
|
|
- debugger;
|
|
|
if (!value) {
|
|
|
state.visible = false;
|
|
|
state.color = "#666666";
|
|
@@ -357,7 +343,7 @@ export const TextStroke = defineComponent({
|
|
|
state.visible = checked;
|
|
|
buildValueSub();
|
|
|
};
|
|
|
- const widthChange = (e: number) => {
|
|
|
+ const widthChange = (e: any) => {
|
|
|
state.width = e;
|
|
|
buildValueSub();
|
|
|
};
|
|
@@ -378,17 +364,21 @@ export const TextStroke = defineComponent({
|
|
|
|
|
|
{state.visible && (
|
|
|
<div class={"flex-1 px-20px"}>
|
|
|
- <Slider
|
|
|
- min={1}
|
|
|
- max={5}
|
|
|
- value={state.width}
|
|
|
- step={1}
|
|
|
- onChange={widthChange}
|
|
|
- />
|
|
|
+ <Tooltip title={"描边宽度"} placement="top">
|
|
|
+ <InputNumber
|
|
|
+ min={1}
|
|
|
+ max={5}
|
|
|
+ step={1}
|
|
|
+ value={state.width}
|
|
|
+ onChange={widthChange}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
- <TextColor value={state.color} onChange={colorChange} />
|
|
|
+ <Tooltip title={"描边颜色"} placement="top">
|
|
|
+ <TextColor value={state.color} onChange={colorChange} />
|
|
|
+ </Tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|