|
@@ -3,6 +3,8 @@ import { string } from "vue-types";
|
|
|
import { useCompData } from ".";
|
|
|
import { View } from "../View";
|
|
|
import { useEditor } from "@/modules/editor";
|
|
|
+import { IconPicture } from "@queenjs/icons";
|
|
|
+import { css } from "@linaria/core";
|
|
|
|
|
|
export const Component = defineComponent({
|
|
|
props: {
|
|
@@ -25,18 +27,40 @@ export const Component = defineComponent({
|
|
|
if (value.controls) options.controls = true;
|
|
|
|
|
|
return (
|
|
|
- <View
|
|
|
- compId={props.compId}
|
|
|
- onDblclick={store.isEditMode ? changeVal : undefined}
|
|
|
- >
|
|
|
+ <View class={rootCls} compId={props.compId}>
|
|
|
<video
|
|
|
class="w-full object-cover"
|
|
|
src={value.url}
|
|
|
style={{ aspectRatio: value.ratio }}
|
|
|
{...options}
|
|
|
/>
|
|
|
+ {store.isEditMode && (
|
|
|
+ <IconPicture class={btnCls} onClick={changeVal} />
|
|
|
+ )}
|
|
|
</View>
|
|
|
);
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
+
|
|
|
+const btnCls = css`
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ padding: 0.4rem;
|
|
|
+ font-size: 0.75rem;
|
|
|
+ color: #666;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(255, 255, 255, 0.7);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ @apply shadow;
|
|
|
+`;
|
|
|
+
|
|
|
+const rootCls = css`
|
|
|
+ &:hover {
|
|
|
+ .${btnCls} {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+`;
|