|
@@ -7,6 +7,7 @@ import { AnyFun } from "queenjs/typing";
|
|
import { defineComponent, reactive } from "vue";
|
|
import { defineComponent, reactive } from "vue";
|
|
import { any } from "vue-types";
|
|
import { any } from "vue-types";
|
|
import { TipIcons } from "../../TipIcons";
|
|
import { TipIcons } from "../../TipIcons";
|
|
|
|
+import { useEditor } from "@/modules/editor";
|
|
|
|
|
|
const selectOptions = [
|
|
const selectOptions = [
|
|
{ value: "px", label: "PX", options: { step: 1 } },
|
|
{ value: "px", label: "PX", options: { step: 1 } },
|
|
@@ -23,6 +24,7 @@ export const Size = defineComponent({
|
|
const state = reactive({
|
|
const state = reactive({
|
|
relateRatio: 0,
|
|
relateRatio: 0,
|
|
});
|
|
});
|
|
|
|
+ const editor = useEditor();
|
|
|
|
|
|
function changeVal(index: number, v: any) {
|
|
function changeVal(index: number, v: any) {
|
|
const { value } = props;
|
|
const { value } = props;
|
|
@@ -82,6 +84,7 @@ export const Size = defineComponent({
|
|
icon={IconWidth}
|
|
icon={IconWidth}
|
|
value={fmtVal(0)}
|
|
value={fmtVal(0)}
|
|
onChange={(v) => changeVal(0, v)}
|
|
onChange={(v) => changeVal(0, v)}
|
|
|
|
+ onIconClick={()=>{ editor.actions.setSameSize(true) }}
|
|
/>
|
|
/>
|
|
<TipIcons.Relate
|
|
<TipIcons.Relate
|
|
class={[relateIconCls, state.relateRatio && "active"]}
|
|
class={[relateIconCls, state.relateRatio && "active"]}
|
|
@@ -94,6 +97,7 @@ export const Size = defineComponent({
|
|
icon={IconHeight}
|
|
icon={IconHeight}
|
|
value={fmtVal(1)}
|
|
value={fmtVal(1)}
|
|
onChange={(v) => changeVal(1, v)}
|
|
onChange={(v) => changeVal(1, v)}
|
|
|
|
+ onIconClick={()=>{ editor.actions.setSameSize(false) }}
|
|
/>
|
|
/>
|
|
<Select
|
|
<Select
|
|
class={selUnitCls}
|
|
class={selUnitCls}
|
|
@@ -116,13 +120,15 @@ const SizeInput = (props: {
|
|
icon: any;
|
|
icon: any;
|
|
value: string;
|
|
value: string;
|
|
onChange: AnyFun;
|
|
onChange: AnyFun;
|
|
|
|
+ onIconClick:AnyFun;
|
|
|
|
+
|
|
}) => {
|
|
}) => {
|
|
const { label, icon, ...inputProps } = props;
|
|
const { label, icon, ...inputProps } = props;
|
|
return (
|
|
return (
|
|
<div class={numberInputCls}>
|
|
<div class={numberInputCls}>
|
|
<span class="pl-14px pr-1px text-14px">{label}</span>
|
|
<span class="pl-14px pr-1px text-14px">{label}</span>
|
|
<InputNumber class="flex-1" bordered={false} {...inputProps} />
|
|
<InputNumber class="flex-1" bordered={false} {...inputProps} />
|
|
- <icon class="tipIcon" />
|
|
|
|
|
|
+ <icon class="tipIcon" onClick={()=>{ props.onIconClick() }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
@@ -137,6 +143,7 @@ const numberInputCls = css`
|
|
font-size: 24px;
|
|
font-size: 24px;
|
|
padding: 3px 5px;
|
|
padding: 3px 5px;
|
|
background-color: #373737;
|
|
background-color: #373737;
|
|
|
|
+ cursor: pointer;
|
|
}
|
|
}
|
|
`;
|
|
`;
|
|
|
|
|