update

src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

@@ -34,6 +34,7 @@ export const Component = defineComponent({
         comp.value.x = 0;
         comp.value.y = 0;
         comp.value.s = 1;
+        comp.value.opacity = 1;
         setImageSize(url);
       } catch (error) {
         console.log(error);
@@ -49,6 +50,7 @@ export const Component = defineComponent({
         scale + "" == "1" && ox + "" == "0" && oy + "" == "0"
           ? "cover"
           : "contain";
+      const op = value?.opacity;
 
       return (
         <View
@@ -62,6 +64,7 @@ export const Component = defineComponent({
             style={{
               transform: `scale(${scale}) translate(${ox}%,${oy}%)`,
               objectFit,
+              opacity: op,
             }}
             src={
               value.url.startsWith("data:image/png")

src/modules/editor/components/CompUI/basicUI/Image2/index.ts

@@ -1,6 +1,7 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createCompHooks } from "../../defines/createCompHooks";
+import Slider from "../../formItems/Slider";
 
 export { Component } from "./component";
 
@@ -10,7 +11,7 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: { url: Dict_Imgs.Default, x: 0, y: 0, s: 1 },
+  value: { url: Dict_Imgs.Default, x: 0, y: 0, s: 1, opacity: 1 },
   layout: {
     size: [750, 400],
   },
@@ -37,4 +38,14 @@ export const Form = createAttrsForm([
     dataIndex: "value.s",
     component: "Input",
   },
+  {
+    label: "透明度",
+    dataIndex: "value.opacity",
+    component: Slider,
+    props: {
+      min: 0,
+      max: 1,
+      step: 0.01,
+    },
+  },
 ]);

src/modules/editor/components/CompUI/formItems/Slider.tsx

@@ -0,0 +1,130 @@
+import { css } from "@linaria/core";
+import { InputNumber, Slider } from "ant-design-vue";
+import { defineComponent, reactive, watchEffect } from "vue";
+import { bool, number } from "vue-types";
+
+export default defineComponent({
+  props: {
+    disabled: bool().def(false),
+    value: number(),
+    min: number(),
+    max: number(),
+    step: number(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      value: props.value,
+    });
+
+    const changeVal = () => {
+      if (state.value == props.value) return;
+      emit("change", state.value);
+    };
+
+    watchEffect(() => {
+      if (props.value != undefined) {
+        state.value = props.value;
+      }
+    });
+
+    return () => {
+      const { disabled, min, max, step } = props;
+      const attr = {
+        disabled: disabled,
+        value: state.value,
+        min,
+        max,
+        step,
+        onChange: (value: any) => {
+          state.value = value;
+          changeVal();
+        },
+      };
+      return (
+        <div class={SliderView}>
+          <Slider
+            class="item_slider"
+            tooltipVisible={false}
+            {...attr}
+            onAfterChange={() => changeVal()}
+          />
+          <InputNumber
+            class="item_input"
+            {...attr}
+            onPressEnter={() => changeVal()}
+            // onBlur={() => {
+            //   if (state.value !== props.value) changeVal();
+            // }}
+          />
+        </div>
+      );
+    };
+  },
+});
+const SliderView = css`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .item_slider {
+    flex: 1;
+  }
+  /* slider style */
+  .ant-slider-disabled {
+    opacity: 0.7;
+  }
+  .ant-slider-step {
+    background-color: rgba(255, 255, 255, 0.27);
+  }
+  .ant-slider-track {
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  .ant-slider:not(.ant-slider-disabled):hover {
+    .ant-slider-handle {
+      background-color: @inf-primary-color;
+      &:not(.ant-tooltip-open) {
+        border-color: #fff;
+      }
+    }
+  }
+  .ant-slider {
+    &.ant-slider-disabled {
+      .ant-slider-handle {
+        background-color: #bbb;
+        opacity: 0.8;
+      }
+    }
+  }
+  .ant-slider-handle {
+    width: 8px;
+    border-radius: 2px;
+    border-color: #fff;
+    background-color: #fff;
+  }
+
+  .ant-slider-handle-click-focused {
+    border-color: #fff;
+    background-color: @inf-primary-color;
+  }
+  /* input style */
+  .item_input {
+    width: 42px;
+    margin-left: 10px;
+    border: none;
+    padding: 2px 0;
+    text-align: center;
+    font-size: 12px;
+    background-color: rgba(252, 254, 255, 0.1);
+    .ant-input-number-handler-wrap {
+      display: none;
+    }
+    .ant-input-number-input {
+      height: auto;
+      padding: 0 2px;
+      text-align: center;
+    }
+  }
+`;