(component): 发布 1.7.1 版本

This commit is contained in:
就眠儀式 2022-10-26 01:48:12 +08:00
parent 0ab1ae66ca
commit e07234a213
5 changed files with 87 additions and 39 deletions

View File

@ -1,6 +1,6 @@
{
"name": "@layui/layui-vue",
"version": "1.7.0",
"version": "1.7.1",
"author": "就眠儀式",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",

View File

@ -101,19 +101,19 @@ const clearAllCutEffect = () => {
};
const { t } = useI18n();
const text = computed(() => t('upload.text'));
const dragText = computed(() => t('upload.dragText'));
const defaultErrorMsg = computed(() => t('upload.defaultErrorMsg'));
const urlErrorMsg = computed(() => t('upload.urlErrorMsg'));
const numberErrorMsg = computed(() => t('upload.numberErrorMsg'));
const occurFileSizeErrorMsg = computed(() => t('upload.occurFileSizeErrorMsg'));
const cutInitErrorMsg = computed(() => t('upload.cutInitErrorMsg'));
const uploadSuccess = computed(() => t('upload.uploadSuccess'));
const startUploadMsg = computed(() => t('upload.startUploadMsg'));
const cannotSupportCutMsg = computed(() => t('upload.cannotSupportCutMsg'))
const title = computed(() => t('upload.title'))
const confirmBtn = computed(() => t('upload.confirmBtn'))
const cancelBtn = computed(() => t('upload.cancelBtn'))
const text = computed(() => t("upload.text"));
const dragText = computed(() => t("upload.dragText"));
const defaultErrorMsg = computed(() => t("upload.defaultErrorMsg"));
const urlErrorMsg = computed(() => t("upload.urlErrorMsg"));
const numberErrorMsg = computed(() => t("upload.numberErrorMsg"));
const occurFileSizeErrorMsg = computed(() => t("upload.occurFileSizeErrorMsg"));
const cutInitErrorMsg = computed(() => t("upload.cutInitErrorMsg"));
const uploadSuccess = computed(() => t("upload.uploadSuccess"));
const startUploadMsg = computed(() => t("upload.startUploadMsg"));
const cannotSupportCutMsg = computed(() => t("upload.cannotSupportCutMsg"));
const title = computed(() => t("upload.title"));
const confirmBtn = computed(() => t("upload.confirmBtn"));
const cancelBtn = computed(() => t("upload.cancelBtn"));
let defaultCutLayerOption = computed<LayerModal>(() => {
return {
@ -126,7 +126,7 @@ let defaultCutLayerOption = computed<LayerModal>(() => {
{ text: confirmBtn.value, callback: getCutDownResult },
{ text: cancelBtn.value, callback: closeCutDownModal },
],
}
};
});
const props = withDefaults(defineProps<UploadProps>(), {
@ -395,26 +395,47 @@ onUnmounted(() => {
</script>
<template>
<div class="layui-upload layui-upload-wrap" :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
class="layui-upload layui-upload-wrap"
: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 class="layui-upload-btn-box" @click.stop="chooseFile">
<template v-if="slot.default">
<slot :disabled="disabled"></slot>
</template>
<template v-else>
<lay-button type="primary" :disabled="disabled">{{ text }}</lay-button>
<lay-button type="primary" :disabled="disabled">{{
text
}}</lay-button>
</template>
</div>
</div>
<div v-else ref="dragRef" class="layui-upload-drag" :class="
<div
v-else
ref="dragRef"
class="layui-upload-drag"
:class="
disabled
? 'layui-upload-drag-disable'
: isDragEnter
? 'layui-upload-drag-draging'
: ''
" @click.stop="chooseFile">
"
@click.stop="chooseFile"
>
<i class="layui-icon"></i>
<p>{{ dragText }}</p>
<div class="layui-hide" id="uploadDemoView">
@ -422,17 +443,38 @@ onUnmounted(() => {
<img src="" alt="上传成功后渲染" style="max-width: 196px" />
</div>
</div>
<lay-layer v-model="innerCutVisible" :title="computedCutLayerOption.title" :move="computedCutLayerOption.move"
:resize="computedCutLayerOption.resize" :shade="computedCutLayerOption.shade"
:shadeClose="computedCutLayerOption.shadeClose" :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" />
<lay-layer
v-model="innerCutVisible"
:title="computedCutLayerOption.title"
:move="computedCutLayerOption.move"
:resize="computedCutLayerOption.resize"
:shade="computedCutLayerOption.shade"
:shadeClose="computedCutLayerOption.shadeClose"
: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>
</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>
</div>
</div>

View File

@ -53,8 +53,10 @@ export default {
numberErrorMsg: "The number of files uploaded exceeds the specified number",
cutInitErrorMsg: "Clipping plug-in initialization failed",
uploadSuccess: "Upload succeeded",
cannotSupportCutMsg: "The current version does not support single multiple file clipping. Try to set multiple to false, and get the returned file object through @ done",
occurFileSizeErrorMsg: "File size warning,The maximum file size cannot exceed target KB",
cannotSupportCutMsg:
"The current version does not support single multiple file clipping. Try to set multiple to false, and get the returned file object through @ done",
occurFileSizeErrorMsg:
"File size warning,The maximum file size cannot exceed target KB",
startUploadMsg: "Upload Start",
confirmBtn: "confirm",
cancelBtn: "cancel",

View File

@ -53,8 +53,10 @@ export default {
numberErrorMsg: "文件上传超过规定的个数",
cutInitErrorMsg: "剪裁插件初始化失败",
uploadSuccess: "上传成功",
cannotSupportCutMsg: "当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为 false, 通过 @done 获取返回文件对象",
occurFileSizeErrorMsg: "文件大小超过限制,文件最大不可超过传入的指定size属性的KB数",
cannotSupportCutMsg:
"当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为 false, 通过 @done 获取返回文件对象",
occurFileSizeErrorMsg:
"文件大小超过限制,文件最大不可超过传入的指定size属性的KB数",
startUploadMsg: "开始上传",
confirmBtn: "确认",
cancelBtn: "取消",

View File

@ -14,11 +14,13 @@
<ul>
<a name="1-7-1"></a>
<li>
<h3>1.7.1 <span class="layui-badge-rim">2022-10-25</span></h3>
<h3>1.7.1 <span class="layui-badge-rim">2022-10-26</span></h3>
<ul>
<li>[新增] date-picker 组件 placeholder 属性 array 类型兼容。</li>
<li>[修复] date-picker 组件 range 属性为 true 时的 国际化 翻译失效。</li>
<li>[修复] date-picker 组件 range 属性为 true 时的 lay-dropdown 无法解析警告。</li>
<li>[修复] upload 组件 裁剪 案例不生效问题, 前提需要 acceptMime 为 images 值。</li>
<li>[优化] upload 组件 i18n 国际化支持。</li>
</ul>
</li>
</ul>