@qxs-bns/components 0.0.58 → 0.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/package.json.mjs +1 -1
- package/es/src/image-upload/src/image-upload.vue.mjs +1 -1
- package/es/src/image-upload/src/image-upload.vue.mjs.map +1 -1
- package/lib/package.json.cjs +1 -1
- package/lib/src/image-upload/src/image-upload.vue.cjs +1 -1
- package/lib/src/image-upload/src/image-upload.vue.cjs.map +1 -1
- package/package.json +2 -1
- package/types/tsconfig.tsbuildinfo +1 -1
package/es/package.json.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var r="0.0.
|
|
1
|
+
var r="0.0.60";export{r as version};
|
|
2
2
|
//# sourceMappingURL=package.json.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ElUpload as e,ElIcon as i,ElImageViewer as t,ElMessage as l}from"element-plus/es";import"element-plus/es/components/base/style/index";import"element-plus/es/components/image-viewer/style/index";import"element-plus/es/components/upload/style/index";import"element-plus/es/components/icon/style/index";import{defineComponent as a,mergeModels as s,useAttrs as r,useModel as n,ref as p,computed as o,createElementBlock as u,openBlock as d,normalizeStyle as m,normalizeClass as c,unref as f,createVNode as v,createBlock as g,createCommentVNode as y,mergeProps as h,withCtx as b,renderSlot as x,createElementVNode as q,toDisplayString as $}from"vue";import{Plus as _,Delete as w}from"@element-plus/icons-vue";import{ZoomIn as V}from"@qxs-bns/
|
|
1
|
+
import{ElUpload as e,ElIcon as i,ElImageViewer as t,ElMessage as l}from"element-plus/es";import"element-plus/es/components/base/style/index";import"element-plus/es/components/image-viewer/style/index";import"element-plus/es/components/upload/style/index";import"element-plus/es/components/icon/style/index";import{defineComponent as a,mergeModels as s,useAttrs as r,useModel as n,ref as p,computed as o,createElementBlock as u,openBlock as d,normalizeStyle as m,normalizeClass as c,unref as f,createVNode as v,createBlock as g,createCommentVNode as y,mergeProps as h,withCtx as b,renderSlot as x,createElementVNode as q,toDisplayString as $}from"vue";import{Plus as _,Delete as w}from"@element-plus/icons-vue";import{ZoomIn as V}from"@qxs-bns/icons";import{useNamespace as k}from"element-plus";import"element-plus/es/components/message/style/index";const S={class:"image-slot"},L=["src"],U=["onClick"],j=["onClick"],z={class:"tip-content"};var B=a({name:"QxsImageUpload",__name:"image-upload",props:s({action:{type:String,required:!0},headers:{type:null,required:!1},data:{type:null,required:!1},name:{type:String,required:!1,default:"file"},url:{type:String,required:!1},size:{type:Number,required:!1,default:20},width:{type:Number,required:!1,default:160},accept:{type:String,required:!1,default:"image/jpeg,image/jpg,image/png,image/gif"},height:{type:Number,required:!1,default:90},placeholder:{type:String,required:!1,default:"上传图片"},notip:{type:Boolean,required:!1,default:!1},tipText:{type:String,required:!1,default:""},beforeUpload:{type:null,required:!1},disabled:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:1}},{fileList:{type:Array,default:()=>[]},fileListModifiers:{}}),emits:s(["onSuccess","remove"],["update:fileList"]),setup(a,{emit:s}){const B=s,C=r(),M=n(a,"fileList"),N=k("image-upload"),O=p(0),R=p({imageViewerVisible:!1,progress:{preview:"",percent:0}}),T=o(()=>N.cssVarBlock({ns:N.namespace.value,width:`${a.width||160}px`,height:`${a.height||90}px`})),A=o(()=>a.accept.split(",").map(e=>e.split("/").pop())),I=o(()=>a.tipText||`上传图片支持 ${A.value.join(" / ")} 格式，且图片大小不超过 ${a.size}MB${a.width&&a.height?`，建议图片尺寸为 ${a.width}*${a.height}`:""}`);function Q(e){O.value=M.value.indexOf(e),R.value.imageViewerVisible=!0}function D(e){M.value.splice(M.value.indexOf(e),1)}function E(){R.value.imageViewerVisible=!1}const F=e=>{const i=e.name.split(".").pop()??"",t=A.value.includes(i),s=e.size/1024/1024<a.size;return t?s?(R.value.progress.preview=URL.createObjectURL(e),!a.beforeUpload||a.beforeUpload(e)):(l.error(`上传图片大小不能超过 ${a.size}MB！`),!1):(l.error(`上传图片只支持${A.value.join(" / ")}格式！`),!1)},G=e=>{R.value.progress.percent=Math.floor(e.percent)},H=(...e)=>{R.value.progress={preview:"",percent:0},B("onSuccess",...e)};return(l,a)=>{const s=i,r=e,n=t;return d(),u("div",{class:c(f(N).e("container")),style:m(f(T))},[v(r,h(f(C),{"file-list":M.value,"onUpdate:fileList":a[0]||(a[0]=e=>M.value=e),drag:"",limit:l.limit,"list-type":"picture-card",headers:l.headers,action:l.action,data:l.data,name:l.name,accept:l.accept,"before-upload":F,"on-progress":G,"on-preview":Q,"on-success":H,class:[f(N).e("control"),l.limit<=M.value.length?f(N).e("more-than-limit"):""],"on-remove":D}),{file:b(({file:e})=>[q("img",{class:c(`${f(N).namespace.value}-upload-list__item-thumbnail`),src:e.url,alt:""},null,10,L),q("span",{class:c(`${f(N).namespace.value}-upload-list__item-actions`)},[q("span",{class:c(`${f(N).namespace.value}-upload-list__item-preview`),onClick:i=>Q(e)},[v(s,null,{default:b(()=>[v(f(V))]),_:1})],10,U),l.disabled?y("v-if",!0):(d(),u("span",{key:0,class:c(`${f(N).namespace.value}-upload-list__item-delete`),onClick:i=>D(e)},[v(s,null,{default:b(()=>[v(f(w))]),_:1})],10,j))],2)]),tip:b(()=>[x(l.$slots,"tip",{},()=>[l.notip?y("v-if",!0):(d(),u("div",{key:0,class:c(`${f(N).namespace.value}-upload__tip-text`)},[q("div",z,$(f(I)),1)],2))])]),default:b(()=>[x(l.$slots,"default",{},()=>[q("div",S,[v(s,null,{default:b(()=>[v(f(_))]),_:1}),q("p",null,$(l.placeholder),1)])])]),_:3},16,["file-list","limit","headers","action","data","name","accept","class"]),f(R).imageViewerVisible?(d(),g(n,{key:0,"url-list":M.value.map(e=>e.url).filter(e=>void 0!==e),"initial-index":f(O),teleported:"",onClose:E},null,8,["url-list","initial-index"])):y("v-if",!0)],6)}}});export{B as default};
|
|
2
2
|
//# sourceMappingURL=image-upload.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-upload.vue.mjs","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Delete, Plus } from '@element-plus/icons-vue'\nimport { ZoomIn } from '@qxs-bns/
|
|
1
|
+
{"version":3,"file":"image-upload.vue.mjs","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Delete, Plus } from '@element-plus/icons-vue'\nimport { ZoomIn } from '@qxs-bns/icons'\nimport { useNamespace } from 'element-plus'\n\n// 组件名称\ndefineOptions({\n name: 'QxsImageUpload',\n})\n\n// Props 定义\nconst {\n name = 'file',\n size = 20,\n width = 160,\n height = 90,\n limit = 1,\n placeholder = '上传图片',\n notip = false,\n accept = 'image/jpeg,image/jpg,image/png,image/gif',\n beforeUpload,\n tipText = '',\n disabled = false,\n} = defineProps<ImageUploadProps>()\n\n// Emits 定义\nconst emits = defineEmits<{\n onSuccess: [res: any, uploadFile: UploadFile, uploadFiles: UploadFiles]\n remove: [file: UploadFile]\n}>()\n\n// 类型定义\nexport interface ImageUploadProps {\n action: UploadProps['action']\n headers?: UploadProps['headers']\n data?: UploadProps['data']\n name?: UploadProps['name']\n url?: string\n size?: number\n width?: number\n accept?: string\n height?: number\n placeholder?: string\n notip?: boolean\n tipText?: string\n beforeUpload?: UploadProps['beforeUpload']\n disabled?: boolean\n limit?: number\n}\n\ninterface UploadProgress {\n preview: string\n percent: number\n}\n\nconst attrs = useAttrs()\n\nconst fileList = defineModel('fileList', {\n type: Array as () => UploadFile[],\n default: () => [],\n})\n\n// 命名空间\nconst nsEl = useNamespace('image-upload')\n\nconst initialIndex = ref(0)\n// 响应式数据\nconst uploadData = ref<{\n imageViewerVisible: boolean\n progress: UploadProgress\n}>({\n imageViewerVisible: false,\n progress: {\n preview: '',\n percent: 0,\n },\n})\n\nconst cssVar = computed(() => {\n return nsEl.cssVarBlock({\n ns: nsEl.namespace.value,\n width: `${width || 160}px`,\n height: `${height || 90}px`,\n })\n})\n\n// 计算属性\nconst exts = computed(() =>\n accept.split(',').map(ext => ext.split('/').pop()),\n)\n\nconst tipMessage = computed(\n () =>\n tipText\n || `上传图片支持 ${exts.value.join(\n ' / ',\n )} 格式，且图片大小不超过 ${size}MB${width && height ? `，建议图片尺寸为 ${width}*${height}` : ''}`,\n)\n\n// 方法\nfunction onPreview(file: UploadFile) {\n initialIndex.value = fileList.value.indexOf(file)\n uploadData.value.imageViewerVisible = true\n}\nfunction onRemove(file: UploadFile) {\n fileList.value.splice(fileList.value.indexOf(file), 1)\n}\n\nfunction previewClose() {\n uploadData.value.imageViewerVisible = false\n}\n\nconst handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {\n const fileExt = file.name.split('.').pop() ?? ''\n const isTypeOk = exts.value.includes(fileExt)\n const isSizeOk = file.size / 1024 / 1024 < size\n\n if (!isTypeOk) {\n ElMessage.error(`上传图片只支持${exts.value.join(' / ')}格式！`)\n return false\n }\n\n if (!isSizeOk) {\n ElMessage.error(`上传图片大小不能超过 ${size}MB！`)\n return false\n }\n\n uploadData.value.progress.preview = URL.createObjectURL(file)\n\n return beforeUpload ? beforeUpload(file) : true\n}\n\nconst onProgress: UploadProps['onProgress'] = (evt) => {\n uploadData.value.progress.percent = Math.floor(evt.percent)\n}\n\nconst onSuccess: UploadProps['onSuccess'] = (...args) => {\n uploadData.value.progress = {\n preview: '',\n percent: 0,\n }\n emits('onSuccess', ...args)\n}\n</script>\n\n<template>\n <div\n :class=\"nsEl.e('container')\"\n :style=\"cssVar\"\n >\n <el-upload\n v-bind=\"attrs\"\n v-model:file-list=\"fileList\"\n drag\n :limit=\"limit\"\n list-type=\"picture-card\"\n :headers=\"headers\"\n :action=\"action\"\n :data=\"data\"\n :name=\"name\"\n :accept=\"accept\"\n :before-upload=\"handleBeforeUpload\"\n :on-progress=\"onProgress\"\n :on-preview=\"onPreview\"\n :on-success=\"onSuccess\"\n :class=\"[nsEl.e('control'), limit <= fileList.length ? nsEl.e('more-than-limit') : '']\"\n :on-remove=\"onRemove\"\n >\n <slot>\n <div class=\"image-slot\">\n <el-icon><Plus /></el-icon>\n <p>{{ placeholder }}</p>\n </div>\n </slot>\n <template #file=\"{ file }\">\n <img\n :class=\"`${nsEl.namespace.value}-upload-list__item-thumbnail`\"\n :src=\"file.url\"\n alt=\"\"\n >\n <span :class=\"`${nsEl.namespace.value}-upload-list__item-actions`\">\n <span\n :class=\"`${nsEl.namespace.value}-upload-list__item-preview`\"\n @click=\"onPreview(file)\"\n >\n <el-icon><ZoomIn /></el-icon>\n </span>\n <span\n v-if=\"!disabled\"\n :class=\"`${nsEl.namespace.value}-upload-list__item-delete`\"\n @click=\"onRemove(file)\"\n >\n <el-icon><Delete /></el-icon>\n </span>\n </span>\n </template>\n <template #tip>\n <slot name=\"tip\">\n <div\n v-if=\"!notip\"\n :class=\"`${nsEl.namespace.value}-upload__tip-text`\"\n >\n <div class=\"tip-content\">\n {{ tipMessage }}\n </div>\n </div>\n </slot>\n </template>\n </el-upload>\n\n <el-image-viewer\n v-if=\"uploadData.imageViewerVisible\"\n :url-list=\"fileList.map((item: UploadFile) => item.url).filter((v: string | undefined) => v !== undefined)\"\n :initial-index=\"initialIndex\"\n teleported\n @close=\"previewClose\"\n />\n </div>\n</template>\n"],"names":["emits","__emit","attrs","useAttrs","fileList","_useModel","__props","nsEl","useNamespace","initialIndex","ref","uploadData","imageViewerVisible","progress","preview","percent","cssVar","computed","cssVarBlock","ns","namespace","value","width","height","exts","split","map","ext","pop","tipMessage","tipText","join","size","onPreview","file","indexOf","onRemove","splice","previewClose","handleBeforeUpload","fileExt","name","isTypeOk","includes","isSizeOk","URL","createObjectURL","beforeUpload","ElMessage","error","onProgress","evt","Math","floor","onSuccess","args","_createElementBlock","class","_normalizeClass","_unref","e","style","_createVNode","_component_el_upload","_mergeProps","$event","drag","limit","headers","action","data","accept","length","_withCtx","_createElementVNode","src","url","alt","onClick","_component_el_icon","ZoomIn","disabled","Delete","tip","_renderSlot","_ctx","notip","_hoisted_5","_toDisplayString","_hoisted_1","Plus","placeholder","_createBlock","_component_el_image_viewer","item","filter","v","teleported","onClose"],"mappings":"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"}
|
package/lib/package.json.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";exports.version="0.0.
|
|
1
|
+
"use strict";exports.version="0.0.60";
|
|
2
2
|
//# sourceMappingURL=package.json.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("element-plus/es");require("element-plus/es/components/base/style/index"),require("element-plus/es/components/image-viewer/style/index"),require("element-plus/es/components/upload/style/index"),require("element-plus/es/components/icon/style/index");var t=require("vue"),l=require("@element-plus/icons-vue"),i=require("@qxs-bns/
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("element-plus/es");require("element-plus/es/components/base/style/index"),require("element-plus/es/components/image-viewer/style/index"),require("element-plus/es/components/upload/style/index"),require("element-plus/es/components/icon/style/index");var t=require("vue"),l=require("@element-plus/icons-vue"),i=require("@qxs-bns/icons"),r=require("element-plus");require("element-plus/es/components/message/style/index");const a={class:"image-slot"},s=["src"],n=["onClick"],o=["onClick"],u={class:"tip-content"};var p=t.defineComponent({name:"QxsImageUpload",__name:"image-upload",props:t.mergeModels({action:{type:String,required:!0},headers:{type:null,required:!1},data:{type:null,required:!1},name:{type:String,required:!1,default:"file"},url:{type:String,required:!1},size:{type:Number,required:!1,default:20},width:{type:Number,required:!1,default:160},accept:{type:String,required:!1,default:"image/jpeg,image/jpg,image/png,image/gif"},height:{type:Number,required:!1,default:90},placeholder:{type:String,required:!1,default:"上传图片"},notip:{type:Boolean,required:!1,default:!1},tipText:{type:String,required:!1,default:""},beforeUpload:{type:null,required:!1},disabled:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:1}},{fileList:{type:Array,default:()=>[]},fileListModifiers:{}}),emits:t.mergeModels(["onSuccess","remove"],["update:fileList"]),setup(p,{emit:d}){const c=d,m=t.useAttrs(),f=t.useModel(p,"fileList"),g=r.useNamespace("image-upload"),v=t.ref(0),h=t.ref({imageViewerVisible:!1,progress:{preview:"",percent:0}}),y=t.computed(()=>g.cssVarBlock({ns:g.namespace.value,width:`${p.width||160}px`,height:`${p.height||90}px`})),q=t.computed(()=>p.accept.split(",").map(e=>e.split("/").pop())),V=t.computed(()=>p.tipText||`上传图片支持 ${q.value.join(" / ")} 格式，且图片大小不超过 ${p.size}MB${p.width&&p.height?`，建议图片尺寸为 ${p.width}*${p.height}`:""}`);function x(e){v.value=f.value.indexOf(e),h.value.imageViewerVisible=!0}function w(e){f.value.splice(f.value.indexOf(e),1)}function C(){h.value.imageViewerVisible=!1}const N=t=>{const l=t.name.split(".").pop()??"",i=q.value.includes(l),r=t.size/1024/1024<p.size;return i?r?(h.value.progress.preview=URL.createObjectURL(t),!p.beforeUpload||p.beforeUpload(t)):(e.ElMessage.error(`上传图片大小不能超过 ${p.size}MB！`),!1):(e.ElMessage.error(`上传图片只支持${q.value.join(" / ")}格式！`),!1)},b=e=>{h.value.progress.percent=Math.floor(e.percent)},_=(...e)=>{h.value.progress={preview:"",percent:0},c("onSuccess",...e)};return(r,p)=>{const d=e.ElIcon,c=e.ElUpload,q=e.ElImageViewer;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(t.unref(g).e("container")),style:t.normalizeStyle(t.unref(y))},[t.createVNode(c,t.mergeProps(t.unref(m),{"file-list":f.value,"onUpdate:fileList":p[0]||(p[0]=e=>f.value=e),drag:"",limit:r.limit,"list-type":"picture-card",headers:r.headers,action:r.action,data:r.data,name:r.name,accept:r.accept,"before-upload":N,"on-progress":b,"on-preview":x,"on-success":_,class:[t.unref(g).e("control"),r.limit<=f.value.length?t.unref(g).e("more-than-limit"):""],"on-remove":w}),{file:t.withCtx(({file:e})=>[t.createElementVNode("img",{class:t.normalizeClass(`${t.unref(g).namespace.value}-upload-list__item-thumbnail`),src:e.url,alt:""},null,10,s),t.createElementVNode("span",{class:t.normalizeClass(`${t.unref(g).namespace.value}-upload-list__item-actions`)},[t.createElementVNode("span",{class:t.normalizeClass(`${t.unref(g).namespace.value}-upload-list__item-preview`),onClick:t=>x(e)},[t.createVNode(d,null,{default:t.withCtx(()=>[t.createVNode(t.unref(i.ZoomIn))]),_:1})],10,n),r.disabled?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(`${t.unref(g).namespace.value}-upload-list__item-delete`),onClick:t=>w(e)},[t.createVNode(d,null,{default:t.withCtx(()=>[t.createVNode(t.unref(l.Delete))]),_:1})],10,o))],2)]),tip:t.withCtx(()=>[t.renderSlot(r.$slots,"tip",{},()=>[r.notip?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(`${t.unref(g).namespace.value}-upload__tip-text`)},[t.createElementVNode("div",u,t.toDisplayString(t.unref(V)),1)],2))])]),default:t.withCtx(()=>[t.renderSlot(r.$slots,"default",{},()=>[t.createElementVNode("div",a,[t.createVNode(d,null,{default:t.withCtx(()=>[t.createVNode(t.unref(l.Plus))]),_:1}),t.createElementVNode("p",null,t.toDisplayString(r.placeholder),1)])])]),_:3},16,["file-list","limit","headers","action","data","name","accept","class"]),t.unref(h).imageViewerVisible?(t.openBlock(),t.createBlock(q,{key:0,"url-list":f.value.map(e=>e.url).filter(e=>void 0!==e),"initial-index":t.unref(v),teleported:"",onClose:C},null,8,["url-list","initial-index"])):t.createCommentVNode("v-if",!0)],6)}}});exports.default=p;
|
|
2
2
|
//# sourceMappingURL=image-upload.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-upload.vue.cjs","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Delete, Plus } from '@element-plus/icons-vue'\nimport { ZoomIn } from '@qxs-bns/
|
|
1
|
+
{"version":3,"file":"image-upload.vue.cjs","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Delete, Plus } from '@element-plus/icons-vue'\nimport { ZoomIn } from '@qxs-bns/icons'\nimport { useNamespace } from 'element-plus'\n\n// 组件名称\ndefineOptions({\n name: 'QxsImageUpload',\n})\n\n// Props 定义\nconst {\n name = 'file',\n size = 20,\n width = 160,\n height = 90,\n limit = 1,\n placeholder = '上传图片',\n notip = false,\n accept = 'image/jpeg,image/jpg,image/png,image/gif',\n beforeUpload,\n tipText = '',\n disabled = false,\n} = defineProps<ImageUploadProps>()\n\n// Emits 定义\nconst emits = defineEmits<{\n onSuccess: [res: any, uploadFile: UploadFile, uploadFiles: UploadFiles]\n remove: [file: UploadFile]\n}>()\n\n// 类型定义\nexport interface ImageUploadProps {\n action: UploadProps['action']\n headers?: UploadProps['headers']\n data?: UploadProps['data']\n name?: UploadProps['name']\n url?: string\n size?: number\n width?: number\n accept?: string\n height?: number\n placeholder?: string\n notip?: boolean\n tipText?: string\n beforeUpload?: UploadProps['beforeUpload']\n disabled?: boolean\n limit?: number\n}\n\ninterface UploadProgress {\n preview: string\n percent: number\n}\n\nconst attrs = useAttrs()\n\nconst fileList = defineModel('fileList', {\n type: Array as () => UploadFile[],\n default: () => [],\n})\n\n// 命名空间\nconst nsEl = useNamespace('image-upload')\n\nconst initialIndex = ref(0)\n// 响应式数据\nconst uploadData = ref<{\n imageViewerVisible: boolean\n progress: UploadProgress\n}>({\n imageViewerVisible: false,\n progress: {\n preview: '',\n percent: 0,\n },\n})\n\nconst cssVar = computed(() => {\n return nsEl.cssVarBlock({\n ns: nsEl.namespace.value,\n width: `${width || 160}px`,\n height: `${height || 90}px`,\n })\n})\n\n// 计算属性\nconst exts = computed(() =>\n accept.split(',').map(ext => ext.split('/').pop()),\n)\n\nconst tipMessage = computed(\n () =>\n tipText\n || `上传图片支持 ${exts.value.join(\n ' / ',\n )} 格式，且图片大小不超过 ${size}MB${width && height ? `，建议图片尺寸为 ${width}*${height}` : ''}`,\n)\n\n// 方法\nfunction onPreview(file: UploadFile) {\n initialIndex.value = fileList.value.indexOf(file)\n uploadData.value.imageViewerVisible = true\n}\nfunction onRemove(file: UploadFile) {\n fileList.value.splice(fileList.value.indexOf(file), 1)\n}\n\nfunction previewClose() {\n uploadData.value.imageViewerVisible = false\n}\n\nconst handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {\n const fileExt = file.name.split('.').pop() ?? ''\n const isTypeOk = exts.value.includes(fileExt)\n const isSizeOk = file.size / 1024 / 1024 < size\n\n if (!isTypeOk) {\n ElMessage.error(`上传图片只支持${exts.value.join(' / ')}格式！`)\n return false\n }\n\n if (!isSizeOk) {\n ElMessage.error(`上传图片大小不能超过 ${size}MB！`)\n return false\n }\n\n uploadData.value.progress.preview = URL.createObjectURL(file)\n\n return beforeUpload ? beforeUpload(file) : true\n}\n\nconst onProgress: UploadProps['onProgress'] = (evt) => {\n uploadData.value.progress.percent = Math.floor(evt.percent)\n}\n\nconst onSuccess: UploadProps['onSuccess'] = (...args) => {\n uploadData.value.progress = {\n preview: '',\n percent: 0,\n }\n emits('onSuccess', ...args)\n}\n</script>\n\n<template>\n <div\n :class=\"nsEl.e('container')\"\n :style=\"cssVar\"\n >\n <el-upload\n v-bind=\"attrs\"\n v-model:file-list=\"fileList\"\n drag\n :limit=\"limit\"\n list-type=\"picture-card\"\n :headers=\"headers\"\n :action=\"action\"\n :data=\"data\"\n :name=\"name\"\n :accept=\"accept\"\n :before-upload=\"handleBeforeUpload\"\n :on-progress=\"onProgress\"\n :on-preview=\"onPreview\"\n :on-success=\"onSuccess\"\n :class=\"[nsEl.e('control'), limit <= fileList.length ? nsEl.e('more-than-limit') : '']\"\n :on-remove=\"onRemove\"\n >\n <slot>\n <div class=\"image-slot\">\n <el-icon><Plus /></el-icon>\n <p>{{ placeholder }}</p>\n </div>\n </slot>\n <template #file=\"{ file }\">\n <img\n :class=\"`${nsEl.namespace.value}-upload-list__item-thumbnail`\"\n :src=\"file.url\"\n alt=\"\"\n >\n <span :class=\"`${nsEl.namespace.value}-upload-list__item-actions`\">\n <span\n :class=\"`${nsEl.namespace.value}-upload-list__item-preview`\"\n @click=\"onPreview(file)\"\n >\n <el-icon><ZoomIn /></el-icon>\n </span>\n <span\n v-if=\"!disabled\"\n :class=\"`${nsEl.namespace.value}-upload-list__item-delete`\"\n @click=\"onRemove(file)\"\n >\n <el-icon><Delete /></el-icon>\n </span>\n </span>\n </template>\n <template #tip>\n <slot name=\"tip\">\n <div\n v-if=\"!notip\"\n :class=\"`${nsEl.namespace.value}-upload__tip-text`\"\n >\n <div class=\"tip-content\">\n {{ tipMessage }}\n </div>\n </div>\n </slot>\n </template>\n </el-upload>\n\n <el-image-viewer\n v-if=\"uploadData.imageViewerVisible\"\n :url-list=\"fileList.map((item: UploadFile) => item.url).filter((v: string | undefined) => v !== undefined)\"\n :initial-index=\"initialIndex\"\n teleported\n @close=\"previewClose\"\n />\n </div>\n</template>\n"],"names":["emits","__emit","attrs","useAttrs","fileList","_useModel","__props","nsEl","useNamespace","initialIndex","ref","uploadData","imageViewerVisible","progress","preview","percent","cssVar","computed","cssVarBlock","ns","namespace","value","width","height","exts","split","map","ext","pop","tipMessage","tipText","join","size","onPreview","file","indexOf","onRemove","splice","previewClose","handleBeforeUpload","fileExt","name","isTypeOk","includes","isSizeOk","URL","createObjectURL","beforeUpload","ElMessage","error","onProgress","evt","Math","floor","onSuccess","args","_createElementBlock","class","_normalizeClass","_unref","e","style","_createVNode","_component_el_upload","_mergeProps","$event","drag","limit","headers","action","data","accept","length","_withCtx","_createElementVNode","src","url","alt","onClick","_component_el_icon","ZoomIn","disabled","Delete","tip","_renderSlot","_ctx","notip","_hoisted_5","_toDisplayString","_hoisted_1","Plus","placeholder","_createBlock","_component_el_image_viewer","item","filter","v","teleported","onClose"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qxs-bns/components",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.60",
|
|
5
5
|
"description": "Vue 3 Component Library",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://trry-hub.github.io/qxs-bns/",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"@iconify/vue": "^5.0.0",
|
|
46
46
|
"@qxs-bns/directives": "0.0.19",
|
|
47
47
|
"@qxs-bns/hooks": "0.0.5",
|
|
48
|
+
"@qxs-bns/icons": "0.0.3",
|
|
48
49
|
"@qxs-bns/utils": "0.0.26",
|
|
49
50
|
"@vueuse/core": "^11.3.0",
|
|
50
51
|
"echarts": "^5.5.1",
|