✨(date-picker): 针对 datepicker 组件 btn 样式的缝缝补补
This commit is contained in:
parent
1de4e93d6d
commit
b079bdb646
@ -18,7 +18,8 @@
|
|||||||
:key="item"
|
:key="item"
|
||||||
:class="{
|
:class="{
|
||||||
'layui-this': MONTH_NAME.indexOf(item) === Month,
|
'layui-this': MONTH_NAME.indexOf(item) === Month,
|
||||||
'layui-laydate-current':Month===''&&parseInt(item)-1===dayjs().month()
|
'layui-laydate-current':
|
||||||
|
Month === '' && parseInt(item) - 1 === dayjs().month(),
|
||||||
}"
|
}"
|
||||||
@click="handleMonthClick(item)"
|
@click="handleMonthClick(item)"
|
||||||
>
|
>
|
||||||
|
@ -36,7 +36,9 @@
|
|||||||
'laydate-range-hover': ifHasRangeHoverClass(
|
'laydate-range-hover': ifHasRangeHoverClass(
|
||||||
getUnix(item, 'left')
|
getUnix(item, 'left')
|
||||||
),
|
),
|
||||||
'layui-laydate-current':(startTime.unix === -1 || endTime.unix === -1)&&getUnix(item, 'left')===dayjs().startOf('month').valueOf()
|
'layui-laydate-current':
|
||||||
|
(startTime.unix === -1 || endTime.unix === -1) &&
|
||||||
|
getUnix(item, 'left') === dayjs().startOf('month').valueOf(),
|
||||||
}"
|
}"
|
||||||
@click="handleMonthClick(getUnix(item, 'left'))"
|
@click="handleMonthClick(getUnix(item, 'left'))"
|
||||||
@mouseenter="monthItemMouseEnter($event, item)"
|
@mouseenter="monthItemMouseEnter($event, item)"
|
||||||
@ -81,7 +83,9 @@
|
|||||||
'laydate-range-hover': ifHasRangeHoverClass(
|
'laydate-range-hover': ifHasRangeHoverClass(
|
||||||
getUnix(item, 'right')
|
getUnix(item, 'right')
|
||||||
),
|
),
|
||||||
'layui-laydate-current':(startTime.unix === -1 || endTime.unix === -1)&&getUnix(item, 'right')===dayjs().startOf('month').valueOf()
|
'layui-laydate-current':
|
||||||
|
(startTime.unix === -1 || endTime.unix === -1) &&
|
||||||
|
getUnix(item, 'right') === dayjs().startOf('month').valueOf(),
|
||||||
}"
|
}"
|
||||||
@click="handleMonthClick(getUnix(item, 'right'))"
|
@click="handleMonthClick(getUnix(item, 'right'))"
|
||||||
@mouseenter="monthItemMouseEnter($event, item)"
|
@mouseenter="monthItemMouseEnter($event, item)"
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
:key="item"
|
:key="item"
|
||||||
:class="{
|
:class="{
|
||||||
'layui-this': Year === item,
|
'layui-this': Year === item,
|
||||||
'layui-laydate-current':!Year&&item===dayjs().year()
|
'layui-laydate-current': !Year && item === dayjs().year(),
|
||||||
}"
|
}"
|
||||||
@click="handleYearClick(item)"
|
@click="handleYearClick(item)"
|
||||||
>
|
>
|
||||||
|
@ -27,7 +27,9 @@
|
|||||||
(item.value == startDate || item.value == endDate)),
|
(item.value == startDate || item.value == endDate)),
|
||||||
'laydate-range-hover': ifHasRangeHoverClass(item),
|
'laydate-range-hover': ifHasRangeHoverClass(item),
|
||||||
'layui-disabled': item.type !== 'current' && datePicker.range,
|
'layui-disabled': item.type !== 'current' && datePicker.range,
|
||||||
'layui-laydate-current':modelValue===-1&&item.value===dayjs().startOf('day').valueOf()
|
'layui-laydate-current':
|
||||||
|
modelValue === -1 &&
|
||||||
|
item.value === dayjs().startOf('day').valueOf(),
|
||||||
}"
|
}"
|
||||||
@click="handleDayClick(item)"
|
@click="handleDayClick(item)"
|
||||||
@mouseenter="dayItemMouseEnter($event, item)"
|
@mouseenter="dayItemMouseEnter($event, item)"
|
||||||
|
@ -248,6 +248,7 @@ html #layuicss-laydate {
|
|||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-laydate-footer span {
|
.layui-laydate-footer span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
@ -272,27 +273,32 @@ html #layuicss-laydate {
|
|||||||
border-bottom-right-radius: 2px;
|
border-bottom-right-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-laydate-footer span:not(:last-child) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-laydate-footer span:hover {
|
.layui-laydate-footer span:hover {
|
||||||
color: #5fb878;
|
color: #5fb878;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-laydate-footer span.layui-laydate-preview {
|
.layui-laydate-footer span.layui-laydate-preview {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
border-color: transparent !important;
|
border-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-laydate-footer span.layui-laydate-preview:hover {
|
.layui-laydate-footer span.layui-laydate-preview:hover {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-laydate-footer span:first-child.layui-laydate-preview {
|
.layui-laydate-footer span:first-child.layui-laydate-preview {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.laydate-footer-btns {
|
.laydate-footer-btns {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
}
|
}
|
||||||
.laydate-footer-btns span {
|
|
||||||
margin: 0 0 0 -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 年月列表 */
|
/* 年月列表 */
|
||||||
.layui-laydate-list {
|
.layui-laydate-list {
|
||||||
|
@ -17,7 +17,7 @@ import {
|
|||||||
ref,
|
ref,
|
||||||
useSlots,
|
useSlots,
|
||||||
withDefaults,
|
withDefaults,
|
||||||
watch
|
watch,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { templateRef } from "@vueuse/core";
|
import { templateRef } from "@vueuse/core";
|
||||||
import { LayLayer } from "@layui/layer-vue";
|
import { LayLayer } from "@layui/layer-vue";
|
||||||
@ -265,7 +265,7 @@ const errorF = (errorText: string) => {
|
|||||||
let errorMsg = errorText ? errorText : defaultErrorMsg;
|
let errorMsg = errorText ? errorText : defaultErrorMsg;
|
||||||
errorMsg = `layui-vue:${errorMsg}`;
|
errorMsg = `layui-vue:${errorMsg}`;
|
||||||
console.warn(errorMsg);
|
console.warn(errorMsg);
|
||||||
layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) { });
|
layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) {});
|
||||||
emit("error", Object.assign({ currentTimeStamp, msg: errorMsg }));
|
emit("error", Object.assign({ currentTimeStamp, msg: errorMsg }));
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -442,9 +442,22 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="layui-upload layui-upload-wrap" :class="disabledPreview ? 'layui-upload-file-disabled' : ''">
|
<div
|
||||||
<input type="file" class="layui-upload-file" ref="orgFileInput" :name="field" :field="field" :multiple="multiple"
|
class="layui-upload layui-upload-wrap"
|
||||||
:accept="acceptMime" :disabled="disabled" @click="clickOrgInput" @change="uploadChange" />
|
:class="disabledPreview ? 'layui-upload-file-disabled' : ''"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
class="layui-upload-file"
|
||||||
|
ref="orgFileInput"
|
||||||
|
:name="field"
|
||||||
|
:field="field"
|
||||||
|
:multiple="multiple"
|
||||||
|
:accept="acceptMime"
|
||||||
|
:disabled="disabled"
|
||||||
|
@click="clickOrgInput"
|
||||||
|
@change="uploadChange"
|
||||||
|
/>
|
||||||
<div v-if="!drag">
|
<div v-if="!drag">
|
||||||
<div class="layui-upload-btn-box" @click.stop="chooseFile">
|
<div class="layui-upload-btn-box" @click.stop="chooseFile">
|
||||||
<template v-if="slot.default">
|
<template v-if="slot.default">
|
||||||
@ -457,13 +470,19 @@ onUnmounted(() => {
|
|||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else ref="dragRef" class="layui-upload-drag" :class="
|
<div
|
||||||
|
v-else
|
||||||
|
ref="dragRef"
|
||||||
|
class="layui-upload-drag"
|
||||||
|
:class="
|
||||||
disabled
|
disabled
|
||||||
? 'layui-upload-drag-disable'
|
? 'layui-upload-drag-disable'
|
||||||
: isDragEnter
|
: isDragEnter
|
||||||
? 'layui-upload-drag-draging'
|
? 'layui-upload-drag-draging'
|
||||||
: ''
|
: ''
|
||||||
" @click.stop="chooseFile">
|
"
|
||||||
|
@click.stop="chooseFile"
|
||||||
|
>
|
||||||
<i class="layui-icon"></i>
|
<i class="layui-icon"></i>
|
||||||
<p>{{ dragText }}</p>
|
<p>{{ dragText }}</p>
|
||||||
<div class="layui-hide" id="uploadDemoView">
|
<div class="layui-hide" id="uploadDemoView">
|
||||||
@ -471,17 +490,38 @@ onUnmounted(() => {
|
|||||||
<img src="" alt="上传成功后渲染" style="max-width: 196px" />
|
<img src="" alt="上传成功后渲染" style="max-width: 196px" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<lay-layer v-model="innerCutVisible" :title="computedCutLayerOption.title" :move="computedCutLayerOption.move"
|
<lay-layer
|
||||||
:resize="computedCutLayerOption.resize" :shade="computedCutLayerOption.shade"
|
v-model="innerCutVisible"
|
||||||
:shadeClose="computedCutLayerOption.shadeClose" :shadeOpacity="computedCutLayerOption.shadeOpacity"
|
:title="computedCutLayerOption.title"
|
||||||
:zIndex="computedCutLayerOption.zIndex" :btnAlign="computedCutLayerOption.btnAlign"
|
:move="computedCutLayerOption.move"
|
||||||
:area="computedCutLayerOption.area" :anim="computedCutLayerOption.anim"
|
:resize="computedCutLayerOption.resize"
|
||||||
:isOutAnim="computedCutLayerOption.isOutAnim" :btn="computedCutLayerOption.btn" @close="clearAllCutEffect">
|
:shade="computedCutLayerOption.shade"
|
||||||
<div class="copper-container" v-for="(base64str, index) in activeUploadFilesImgs" :key="`file${index}`">
|
:shadeClose="computedCutLayerOption.shadeClose"
|
||||||
<img :src="base64str" :id="`_lay_upload_img${index}`" class="_lay_upload_img" />
|
:shadeOpacity="computedCutLayerOption.shadeOpacity"
|
||||||
|
:zIndex="computedCutLayerOption.zIndex"
|
||||||
|
:btnAlign="computedCutLayerOption.btnAlign"
|
||||||
|
:area="computedCutLayerOption.area"
|
||||||
|
:anim="computedCutLayerOption.anim"
|
||||||
|
:isOutAnim="computedCutLayerOption.isOutAnim"
|
||||||
|
:btn="computedCutLayerOption.btn"
|
||||||
|
@close="clearAllCutEffect"
|
||||||
|
>
|
||||||
|
<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" :class="disabledPreview ? 'layui-upload-list-disabled' : ''">
|
<div
|
||||||
|
class="layui-upload-list"
|
||||||
|
:class="disabledPreview ? 'layui-upload-list-disabled' : ''"
|
||||||
|
>
|
||||||
<slot name="preview"></slot>
|
<slot name="preview"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user