✨(component): 发布 1.7.1 版本

package/component/package.json

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

package/component/src/component/upload/index.vue

@@ -101,19 +101,19 @@ const clearAllCutEffect = () => {
 };
 
 const { t } = useI18n();
-const text = computed(() => t('upload.text'));
+const text = computed(() => t("upload.text"));
-const dragText = computed(() => t('upload.dragText'));
+const dragText = computed(() => t("upload.dragText"));
-const defaultErrorMsg = computed(() => t('upload.defaultErrorMsg'));
+const defaultErrorMsg = computed(() => t("upload.defaultErrorMsg"));
-const urlErrorMsg = computed(() => t('upload.urlErrorMsg'));
+const urlErrorMsg = computed(() => t("upload.urlErrorMsg"));
-const numberErrorMsg = computed(() => t('upload.numberErrorMsg'));
+const numberErrorMsg = computed(() => t("upload.numberErrorMsg"));
-const occurFileSizeErrorMsg = computed(() => t('upload.occurFileSizeErrorMsg'));
+const occurFileSizeErrorMsg = computed(() => t("upload.occurFileSizeErrorMsg"));
-const cutInitErrorMsg = computed(() => t('upload.cutInitErrorMsg'));
+const cutInitErrorMsg = computed(() => t("upload.cutInitErrorMsg"));
-const uploadSuccess = computed(() => t('upload.uploadSuccess'));
+const uploadSuccess = computed(() => t("upload.uploadSuccess"));
-const startUploadMsg = computed(() => t('upload.startUploadMsg'));
+const startUploadMsg = computed(() => t("upload.startUploadMsg"));
-const cannotSupportCutMsg = computed(() => t('upload.cannotSupportCutMsg'))
+const cannotSupportCutMsg = computed(() => t("upload.cannotSupportCutMsg"));
-const title = computed(() => t('upload.title'))
+const title = computed(() => t("upload.title"));
-const confirmBtn = computed(() => t('upload.confirmBtn'))
+const confirmBtn = computed(() => t("upload.confirmBtn"));
-const cancelBtn = computed(() => t('upload.cancelBtn'))
+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>(), {
@@ -229,7 +229,7 @@ const errorF = (errorText: string) => {
   let errorMsg = errorText ? errorText : defaultErrorMsg;
   errorMsg = `layui-vue:${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 }));
 };
 
@@ -395,26 +395,47 @@ onUnmounted(() => {
 </script>
 
 <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 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
-      disabled
+      v-else
-        ? 'layui-upload-drag-disable'
+      ref="dragRef"
-        : isDragEnter
+      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"
+    <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>
     </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>

package/component/src/language/locales/en_US.ts

@@ -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",
+    cannotSupportCutMsg:
-    occurFileSizeErrorMsg: "File size warning,The maximum file size cannot exceed target KB",
+      "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",

package/component/src/language/locales/zh_CN.ts

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

package/document-component/src/document/zh-CN/guide/changelog.md

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