refactor: 补充提交
This commit is contained in:
parent
1359640db7
commit
dd02e978ca
@ -19,7 +19,7 @@ const props = withDefaults(defineProps<LayTimelineProps>(), {
|
|||||||
const timeLineClass = computed(() => [
|
const timeLineClass = computed(() => [
|
||||||
"layui-timeline",
|
"layui-timeline",
|
||||||
props.direction === "horizontal" ? "layui-timeline-horizontal" : "",
|
props.direction === "horizontal" ? "layui-timeline-horizontal" : "",
|
||||||
])
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -7,7 +7,16 @@ export default {
|
|||||||
import "./index.less";
|
import "./index.less";
|
||||||
import { Recordable } from "../../types";
|
import { Recordable } from "../../types";
|
||||||
import { layer } from "@layui/layer-vue";
|
import { layer } from "@layui/layer-vue";
|
||||||
import { computed, ComputedRef, getCurrentInstance, nextTick, ref, toRaw, useSlots, withDefaults } from "vue";
|
import {
|
||||||
|
computed,
|
||||||
|
ComputedRef,
|
||||||
|
getCurrentInstance,
|
||||||
|
nextTick,
|
||||||
|
ref,
|
||||||
|
toRaw,
|
||||||
|
useSlots,
|
||||||
|
withDefaults,
|
||||||
|
} from "vue";
|
||||||
import { templateRef } from "@vueuse/core";
|
import { templateRef } from "@vueuse/core";
|
||||||
import { LayLayer } from "@layui/layer-vue";
|
import { LayLayer } from "@layui/layer-vue";
|
||||||
import Cropper from "cropperjs";
|
import Cropper from "cropperjs";
|
||||||
@ -15,7 +24,7 @@ import Cropper from "cropperjs";
|
|||||||
//https://www.layuiweb.com/doc/modules/upload.html#options
|
//https://www.layuiweb.com/doc/modules/upload.html#options
|
||||||
export interface LayerButton {
|
export interface LayerButton {
|
||||||
text: string;
|
text: string;
|
||||||
callback:Function
|
callback: Function;
|
||||||
}
|
}
|
||||||
export interface LayerModal {
|
export interface LayerModal {
|
||||||
title?: string;
|
title?: string;
|
||||||
@ -30,7 +39,7 @@ export interface LayerModal{
|
|||||||
zIndex?: number;
|
zIndex?: number;
|
||||||
type?: "component" | "iframe";
|
type?: "component" | "iframe";
|
||||||
closeBtn?: boolean;
|
closeBtn?: boolean;
|
||||||
area:string[],
|
area: string[];
|
||||||
btn?: LayerButton[];
|
btn?: LayerButton[];
|
||||||
btnAlign?: "l" | "r" | "c";
|
btnAlign?: "l" | "r" | "c";
|
||||||
anim?: boolean;
|
anim?: boolean;
|
||||||
@ -38,7 +47,7 @@ export interface LayerModal{
|
|||||||
}
|
}
|
||||||
export interface cutOptions {
|
export interface cutOptions {
|
||||||
layerOption: LayerModal;
|
layerOption: LayerModal;
|
||||||
copperOption?:typeof Cropper
|
copperOption?: typeof Cropper;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LayUploadProps {
|
export interface LayUploadProps {
|
||||||
@ -54,7 +63,7 @@ export interface LayUploadProps {
|
|||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
cut?: boolean;
|
cut?: boolean;
|
||||||
cutOptions: cutOptions;
|
cutOptions: cutOptions;
|
||||||
};
|
}
|
||||||
|
|
||||||
const getCutDownResult = () => {
|
const getCutDownResult = () => {
|
||||||
if (_cropper) {
|
if (_cropper) {
|
||||||
@ -75,7 +84,7 @@ const closeCutDownModal =()=>{
|
|||||||
let currentTimeStamp = new Date().valueOf();
|
let currentTimeStamp = new Date().valueOf();
|
||||||
emit("cutcancel", Object.assign({ currentTimeStamp }));
|
emit("cutcancel", Object.assign({ currentTimeStamp }));
|
||||||
nextTick(() => clearAllCutEffect());
|
nextTick(() => clearAllCutEffect());
|
||||||
}
|
};
|
||||||
const clearAllCutEffect = () => {
|
const clearAllCutEffect = () => {
|
||||||
activeUploadFiles.value = [];
|
activeUploadFiles.value = [];
|
||||||
activeUploadFilesImgs.value = [];
|
activeUploadFilesImgs.value = [];
|
||||||
@ -90,13 +99,13 @@ let defaultCutLayerOption:LayerModal = {
|
|||||||
offset: [],
|
offset: [],
|
||||||
btn: [
|
btn: [
|
||||||
{ text: "导出", callback: getCutDownResult },
|
{ text: "导出", callback: getCutDownResult },
|
||||||
{ text:"取消" ,callback:closeCutDownModal }
|
{ text: "取消", callback: closeCutDownModal },
|
||||||
],
|
],
|
||||||
area: ["640px", "640px"],
|
area: ["640px", "640px"],
|
||||||
content: "11",
|
content: "11",
|
||||||
shade: true,
|
shade: true,
|
||||||
shadeClose: true,
|
shadeClose: true,
|
||||||
type:"component"
|
type: "component",
|
||||||
};
|
};
|
||||||
const props = withDefaults(defineProps<LayUploadProps>(), {
|
const props = withDefaults(defineProps<LayUploadProps>(), {
|
||||||
acceptMime: "images",
|
acceptMime: "images",
|
||||||
@ -107,13 +116,20 @@ const props = withDefaults(defineProps<LayUploadProps>(), {
|
|||||||
drag: false,
|
drag: false,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
cut: false,
|
cut: false,
|
||||||
cutOptions:void 0
|
cutOptions: void 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
const slot = useSlots();
|
const slot = useSlots();
|
||||||
const slots = slot.default && slot.default();
|
const slots = slot.default && slot.default();
|
||||||
const context = getCurrentInstance();
|
const context = getCurrentInstance();
|
||||||
const emit = defineEmits(["choose", "before", "done", "error","cutdone","cutcancel"]);
|
const emit = defineEmits([
|
||||||
|
"choose",
|
||||||
|
"before",
|
||||||
|
"done",
|
||||||
|
"error",
|
||||||
|
"cutdone",
|
||||||
|
"cutcancel",
|
||||||
|
]);
|
||||||
|
|
||||||
// 内部变量
|
// 内部变量
|
||||||
const isDragEnter = ref(false);
|
const isDragEnter = ref(false);
|
||||||
@ -125,7 +141,9 @@ const orgFileInput = templateRef<HTMLElement>("orgFileInput");
|
|||||||
let _cropper: any = null;
|
let _cropper: any = null;
|
||||||
let computedCutLayerOption: ComputedRef<LayerModal>;
|
let computedCutLayerOption: ComputedRef<LayerModal>;
|
||||||
if (props.cutOptions && props.cutOptions.layerOption) {
|
if (props.cutOptions && props.cutOptions.layerOption) {
|
||||||
computedCutLayerOption = computed(()=>Object.assign(defaultCutLayerOption,props.cutOptions.layerOption));
|
computedCutLayerOption = computed(() =>
|
||||||
|
Object.assign(defaultCutLayerOption, props.cutOptions.layerOption)
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
computedCutLayerOption = computed(() => defaultCutLayerOption);
|
computedCutLayerOption = computed(() => defaultCutLayerOption);
|
||||||
}
|
}
|
||||||
@ -182,7 +200,7 @@ interface localUploadOption {
|
|||||||
[propMame: string]: any;
|
[propMame: string]: any;
|
||||||
}
|
}
|
||||||
const dataURLtoFile = (dataurl: string) => {
|
const dataURLtoFile = (dataurl: string) => {
|
||||||
let arr:any[] = dataurl.split(',');
|
let arr: any[] = dataurl.split(",");
|
||||||
let mime: string = "";
|
let mime: string = "";
|
||||||
if (arr.length > 0) {
|
if (arr.length > 0) {
|
||||||
mime = arr[0].match(/:(.*?);/)[1];
|
mime = arr[0].match(/:(.*?);/)[1];
|
||||||
@ -302,7 +320,9 @@ const getUploadChange = (e: any) => {
|
|||||||
}, 400);
|
}, 400);
|
||||||
} else {
|
} else {
|
||||||
if (arm2) {
|
if (arm2) {
|
||||||
console.warn("layui-vue:当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为false,通过@done获取返回文件对象");
|
console.warn(
|
||||||
|
"layui-vue:当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为false,通过@done获取返回文件对象"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
commonUploadTransaction(_files);
|
commonUploadTransaction(_files);
|
||||||
}
|
}
|
||||||
@ -311,7 +331,7 @@ const commonUploadTransaction=(_files:any[])=>{
|
|||||||
if (props.url) {
|
if (props.url) {
|
||||||
localUploadTransaction({
|
localUploadTransaction({
|
||||||
url: props.url,
|
url: props.url,
|
||||||
files: _files
|
files: _files,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
emit("done", _files);
|
emit("done", _files);
|
||||||
@ -329,9 +349,7 @@ const clickOrgInput = () => {
|
|||||||
//console.log(currentTimeStamp);
|
//console.log(currentTimeStamp);
|
||||||
emit("choose", currentTimeStamp);
|
emit("choose", currentTimeStamp);
|
||||||
};
|
};
|
||||||
const cutTransaction =()=>{
|
const cutTransaction = () => {};
|
||||||
|
|
||||||
};
|
|
||||||
//内部方法 -> end
|
//内部方法 -> end
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
@ -358,7 +376,13 @@ const cutTransaction =()=>{
|
|||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="layui-upload-drag"
|
class="layui-upload-drag"
|
||||||
:class="disabled?'layui-upload-drag-disable':isDragEnter ? 'layui-upload-drag-draging' : ''"
|
:class="
|
||||||
|
disabled
|
||||||
|
? 'layui-upload-drag-disable'
|
||||||
|
: isDragEnter
|
||||||
|
? 'layui-upload-drag-draging'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
@click.stop="chooseFile"
|
@click.stop="chooseFile"
|
||||||
>
|
>
|
||||||
<i class="layui-icon"></i>
|
<i class="layui-icon"></i>
|
||||||
@ -381,11 +405,20 @@ const cutTransaction =()=>{
|
|||||||
:anim="computedCutLayerOption.anim"
|
:anim="computedCutLayerOption.anim"
|
||||||
:isOutAnim="computedCutLayerOption.isOutAnim"
|
:isOutAnim="computedCutLayerOption.isOutAnim"
|
||||||
:btn="computedCutLayerOption.btn"
|
:btn="computedCutLayerOption.btn"
|
||||||
v-model="innerCutVisible" @close="clearAllCutEffect">
|
v-model="innerCutVisible"
|
||||||
<div class="copper-container" v-for="(base64str,index) in activeUploadFilesImgs" :key="`file${index}`">
|
@close="clearAllCutEffect"
|
||||||
<img :src="base64str" :id="`_lay_upload_img${index}`" class="_lay_upload_img">
|
>
|
||||||
|
<div
|
||||||
|
class="copper-container"
|
||||||
|
v-for="(base64str, index) in activeUploadFilesImgs"
|
||||||
|
:key="`file${index}`"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="base64str"
|
||||||
|
:id="`_lay_upload_img${index}`"
|
||||||
|
class="_lay_upload_img"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</lay-layer>
|
</lay-layer>
|
||||||
<div class="layui-upload-list">
|
<div class="layui-upload-list">
|
||||||
<slot name="preview"></slot>
|
<slot name="preview"></slot>
|
||||||
|
@ -60,10 +60,10 @@ const changeTheme = (theme: string) => {
|
|||||||
disableStyleSheetsProxy: false,
|
disableStyleSheetsProxy: false,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
localStorage.setItem('layui-vue-theme-dark','true')
|
localStorage.setItem("layui-vue-theme-dark", "true");
|
||||||
} else {
|
} else {
|
||||||
disableDarkMode();
|
disableDarkMode();
|
||||||
localStorage.setItem('layui-vue-theme-dark','false')
|
localStorage.setItem("layui-vue-theme-dark", "false");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user