refactor: 补充提交

This commit is contained in:
lockingreal 2022-04-03 11:32:08 +08:00
parent 1359640db7
commit dd02e978ca
3 changed files with 130 additions and 97 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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");
} }
}; };