widget.qw 1.0.75 → 1.0.77

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "1.0.75",
+  "version": "1.0.77",
   "description": "marqstree Vue3组件库",
   "main": "build/widget.qw.es.js",
   "keywords": [

package/src/components/FilePicker.vue

@@ -3,10 +3,9 @@
         label-class="label" :placeholder="props.placeholder">
         <template #input>
             <div class="file-box">
-                <van-uploader v-model="files" :max-count="props.max" :afterRead="onAfterRead" :disabled="isDisabled"
-                    :accept="props.accept" upload-icon="plus" :deletable="!isDisabled"
-                    :before-delete="onBeforeDelete"
-                    @click-preview="onClickPreview" />
+                <van-uploader v-model="files" :multiple="props.multiple" :max-count="maxCount" :afterRead="onAfterRead"
+                    :disabled="isDisabled" :accept="props.accept" upload-icon="plus" :deletable="!isDisabled"
+                    :before-delete="onBeforeDelete" @click-preview="onClickPreview" />
             </div>
         </template>
     </van-field>
@@ -30,6 +29,10 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    maxCount: {
+        type: Number,
+        default: 1000
+    },
     required: {
         type: Boolean,
         default: false
@@ -61,35 +64,59 @@ const modelValue = useVModel(props, 'modelValue', emit)
 const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
 
 const files = ref([])
+const maxCount = computed(() => {
+    if (props.multiple)
+        return props.maxCount
+    else
+        return 1
+})
 
 onMounted(() => {
 
 })
 
-const onClickPreview=(e)=>{
+const onClickPreview = (e) => {
     let url = (e.url || '')
-    if(url.includes('.jpg') || url.includes('.png') || url.includes('.jpeg'))
+    if (url.includes('.jpg') || url.includes('.png') || url.includes('.jpeg'))
         return
 
     window.location.href = e.url
 }
 
-const onAfterRead = async (file) => {
-    console.log(file)
-    let params = {
-        file: file.file
-    }
+const onAfterRead = async (e) => {
+    console.log('onAfterRead', e)
+
+    if (props.multiple) {
+        if (e && e.length > 0) {
+            for (var i = 0; i < e.length; i++) {
+                let params = {
+                    file: e[i].file
+                }
+
+                let res = await util.file_upload(params)
+                if (res.code == 200) {
+                    modelValue.value = [...(modelValue.value || []), res.data]
+                }
+            }
+
+            return Promise.resolve(e)
+        }
+    } else {
+        let params = {
+            file: e.file
+        }
 
-    return util.file_upload(params).then(res => {
-        if (props.multiple)
-            modelValue.value = [...(modelValue.value || []), res.data]
-        else
+        let res = await util.file_upload(params)
+        if (res.code == 200) {
             modelValue.value = res.data
-        return Promise.resolve(file)
-    })
+            return Promise.resolve(e)
+        }
+    }
 }
 
 const onBeforeDelete = (e) => {
+    console.log('onBeforeDelete', e)
+
     if (props.multiple) {
         let newUrls = props.modelValue.filter(item => {
             return item != e.url

package/src/components/images_picker.vue

@@ -3,12 +3,15 @@
         :placeholder="props.placeholder">
         <template #input>
             <div class="image-box">
-                <van-uploader v-if="props.capture" v-model="files" :max-count="props.max" :capture="props.capture"
-                    accept="image/jpeg,image/png" :disabled="isDisabled" :deletable="!isRequired && !isDisabled"
-                    :afterRead="onAfterRead" :before-delete="onBeforeDelete" :show-upload="!isReadonly"/>
-                <van-uploader v-else v-model="files" :max-count="props.max" accept="image/jpeg,image/png"
-                    :disabled="isDisabled" :deletable="!isReadonly && !isDisabled" :afterRead="onAfterRead"
-                    :before-delete="onBeforeDelete" :show-upload="!isReadonly"/>
+                <van-uploader v-if="props.capture && (!isReadonly && !isDisabled)" v-model="files" :max-count="props.max"
+                    :capture="props.capture" accept="image/jpeg,image/png" :disabled="isDisabled"
+                    :deletable="!isRequired && !isDisabled" :afterRead="onAfterRead" :before-delete="onBeforeDelete"
+                    :show-upload="!isReadonly" />
+                <van-uploader v-if="!props.capture && (!isReadonly && !isDisabled)" v-model="files" :max-count="props.max"
+                    accept="image/jpeg,image/png" :disabled="isDisabled" :deletable="!isReadonly && !isDisabled"
+                    :afterRead="onAfterRead" :before-delete="onBeforeDelete" :show-upload="!isReadonly" />
+                <img class="cover" v-if="isReadonly || isDisabled" v-for="(cover, i) in previews" :key="i" :src="cover" @click="onPreview(i)" />
+                <van-icon v-if="modelValue.length>props.maxPreview && (isReadonly || isDisabled)" name="ellipsis" @click="onToggleMore"/>
             </div>
         </template>
     </van-field>
@@ -18,6 +21,7 @@
 import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
 import util from "@/util"
 import { useVModel } from "@vueuse/core"
+import { showImagePreview } from 'vant';
 
 const props = defineProps({
     modelValue: {
@@ -50,7 +54,7 @@ const props = defineProps({
     },
     max: {
         type: Number,
-        default: 1000
+        default: 10000
     },
     rules: {
         type: Array,
@@ -59,12 +63,26 @@ const props = defineProps({
     auth: {
         type: String,
         default: ''
+    },
+    maxPreview: {
+        type: Number,
+        default: 1
     }
 })
 const emit = defineEmits(['update:modelValue'])
 const modelValue = useVModel(props, 'modelValue', emit)
 const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
 const files = ref([])
+const isPreviewMore=ref(false)
+const previews=computed(()=>{
+    if(!modelValue.value || modelValue.value.length<1)
+        return []
+
+    if(props.maxPreview > modelValue.value.length || isPreviewMore.value)
+        return modelValue.value
+
+    return modelValue.value.slice(0, props.maxPreview)
+})
 
 onMounted(() => {
 
@@ -102,6 +120,14 @@ const onBeforeDelete = (e) => {
     return Promise.resolve(e)
 }
 
+const onPreview = (i) => {
+    showImagePreview({images:modelValue.value, startPosition:i})
+}
+
+const onToggleMore=()=>{
+    isPreviewMore.value = !isPreviewMore.value
+}
+
 watch(() => props.modelValue,
     (newVal, oldVal) => {
         if (!props.modelValue || props.modelValue.length < 1) {
@@ -123,23 +149,12 @@ watch(() => props.modelValue,
 </script>
 
 <style lang="scss" scoped>
-.widget {
-    text-align: center;
-
-    .btn {
-        position: fixed;
-        bottom: 1rem;
-        left: 0;
-        right: 0;
-        margin: auto auto;
-        color: white;
-        font-size: 14px;
-        background: rgba(58, 136, 255, 1);
-        padding: 8px 35px;
-        width: 100px;
-        text-align: center;
-        display: inline-block;
-        border-radius: 2px;
+
+    .image-box {
+
+        .cover {
+            width: 80px;
+            height: 80px;
+        }
     }
-}
 </style>

package/src/views/filepicker/index.vue

@@ -9,7 +9,8 @@ import { onMounted, reactive, watch } from "vue";
 
 const data = reactive({
   auth:'require',
-  urls: ['http://www.zjpsjdsb.online/static/QxI3PBaT.pdf','http://www.zjpsjdsb.online/static/gxm6QYXR.png']
+  // url: 'http://www.zjpsjdsb.online/static/QxI3PBaT.pdf'
+  urls: ['http://www.zjpsjdsb.online/static/gxm6QYXR.png','http://www.zjpsjdsb.online/static/gxm6QYXR.png']
 })
 
 watch(()=>data.url,(newVal,oldVal)=>{

package/src/views/imagespicker/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-      <widget-qw-images-picker label="图片列表" v-model="data.urls" :auth="data.auth"  />
+      <widget-qw-images-picker label="图片列表" v-model="data.urls" :auth="data.auth" maxPreview=1 />
   </div>
 </template>
 
@@ -9,7 +9,7 @@ import { onMounted, reactive, watch } from "vue";
 
 const data = reactive({
   auth:'readonly',
-  urls: ['http://www.zjpsjdsb.online/static//HrMi9Q2J.png']
+  urls: ['http://www.zjpsjdsb.online/static//HrMi9Q2J.png','http://www.zjpsjdsb.online/static//HrMi9Q2J.png','http://www.zjpsjdsb.online/static//HrMi9Q2J.png','http://www.zjpsjdsb.online/static//HrMi9Q2J.png','http://www.zjpsjdsb.online/static//HrMi9Q2J.png','http://www.zjpsjdsb.online/static//HrMi9Q2J.png']
 })
 
 watch(()=>data.url,(newVal,oldVal)=>{