widget.qw 1.0.83 → 1.0.84

package/src/components/image_picker.vue

@@ -1,124 +1,124 @@
-<template>
-    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="props.rules"
-        label-class="label" :placeholder="props.placeholder">
-        <template #input>
-            <div class="image-box">
-                <van-uploader v-if="props.capture" v-model="files" :max-count="1" :capture="props.capture"
-                    accept="image/jpeg,image/png" :afterRead="onAfterRead" :disabled="isDisabled"
-                    :deletable="!isReadonly && !isDisabled" :before-delete="onBeforeDelete" :show-upload="!isReadonly"
-                     />
-                <van-uploader v-else v-model="files" :max-count="1" accept="image/jpeg,image/png"
-                    :afterRead="onAfterRead" :disabled="isDisabled" :deletable="!isReadonly && !isDisabled"
-                    :before-delete="onBeforeDelete" :show-upload="!isReadonly"
-                     />
-            </div>
-        </template>
-    </van-field>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
-import util from '../util'
-import { useVModel } from "@vueuse/core"
-
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: ''
-    },
-    label: {
-        type: String,
-        default: ''
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    capture: {
-        type: String,
-        default: ''
-    },
-    compress: {
-        type: Boolean,
-        default: true
-    },
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    auth: {
-        type: String,
-        default: ''
-    }
-})
-
-const emit = defineEmits(['update:modelValue'])
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
-
-const files = ref([])
-
-onMounted(() => {
-
-})
-
-const onAfterRead = async (file) => {
-    console.log(file)
-
-    let compress_file = file.file
-    if (props.compress) {
-        compress_file = await util.compress_image(file.file)
-    }
-
-    let params = {
-        file: compress_file
-    }
-
-    return util.file_upload(params).then(res => {
-        modelValue.value = res.data
-        return Promise.resolve(file)
-    })
-}
-
-const onBeforeDelete = (e) => {
-    modelValue.value = ''
-    return Promise.resolve(e)
-}
-
-watch(() => props.modelValue,
-    (newVal, oldVal) => {
-        if (!props.modelValue) {
-            files.value = []
-            return
-        }
-
-        files.value = [{
-            url: props.modelValue
-        }]
-    },
-    {
-        immediate: true
-    }
-)
-</script>
-
-<style lang="scss" scoped>
-:deep(.label) {
-    color: #000 !important;
-}
-
-:deep(.van-field__control:disabled) {
-    color: #000 !important;
-    cursor: not-allowed;
-    opacity: 1;
-    -webkit-text-fill-color: #000;
-}
+<template>
+    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="props.rules"
+        label-class="label" :placeholder="props.placeholder">
+        <template #input>
+            <div class="image-box">
+                <van-uploader v-if="props.capture" v-model="files" :max-count="1" :capture="props.capture"
+                    accept="image/jpeg,image/png" :afterRead="onAfterRead" :disabled="isDisabled"
+                    :deletable="!isReadonly && !isDisabled" :before-delete="onBeforeDelete" :show-upload="!isReadonly"
+                     />
+                <van-uploader v-else v-model="files" :max-count="1" accept="image/jpeg,image/png"
+                    :afterRead="onAfterRead" :disabled="isDisabled" :deletable="!isReadonly && !isDisabled"
+                    :before-delete="onBeforeDelete" :show-upload="!isReadonly"
+                     />
+            </div>
+        </template>
+    </van-field>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import util from '../util'
+import { useVModel } from "@vueuse/core"
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    capture: {
+        type: String,
+        default: ''
+    },
+    compress: {
+        type: Boolean,
+        default: true
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    auth: {
+        type: String,
+        default: ''
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+
+const files = ref([])
+
+onMounted(() => {
+
+})
+
+const onAfterRead = async (file) => {
+    console.log(file)
+
+    let compress_file = file.file
+    if (props.compress) {
+        compress_file = await util.compress_image(file.file)
+    }
+
+    let params = {
+        file: compress_file
+    }
+
+    return util.file_upload(params).then(res => {
+        modelValue.value = res.data
+        return Promise.resolve(file)
+    })
+}
+
+const onBeforeDelete = (e) => {
+    modelValue.value = ''
+    return Promise.resolve(e)
+}
+
+watch(() => props.modelValue,
+    (newVal, oldVal) => {
+        if (!props.modelValue) {
+            files.value = []
+            return
+        }
+
+        files.value = [{
+            url: props.modelValue
+        }]
+    },
+    {
+        immediate: true
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+:deep(.label) {
+    color: #000 !important;
+}
+
+:deep(.van-field__control:disabled) {
+    color: #000 !important;
+    cursor: not-allowed;
+    opacity: 1;
+    -webkit-text-fill-color: #000;
+}
 </style>

package/src/components/images_picker.vue

@@ -1,196 +1,196 @@
-<template>
-    <van-field name="image" :label="props.label" :required="isRequired" :rules="props.rules" label-class="label"
-        :placeholder="props.placeholder">
-        <template #input>
-            <div class="image-box">
-                <van-uploader v-if="props.capture && (!isReadonly && !isDisabled)" v-model="files" multiple
-                    :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" multiple
-                    :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>
-</template>
-
-<script setup>
-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: {
-        type: Array,
-        default: []
-    },
-    label: {
-        type: String,
-        default: ''
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    placeholder: {
-        type: String,
-        default: undefined
-    },
-    capture: {
-        type: String,
-        default: ''
-    },
-    compress: {
-        type: Boolean,
-        default: true
-    },
-    max: {
-        type: Number,
-        default: 10000
-    },
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    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(() => {
-
-})
-
-const onAfterRead = async (e) => {
-    console.log('onAfterRead', e)
-
-    let files = []
-    if (e && Array.isArray(e) && e.length > 0) {
-        files = e
-    }else{
-        files = [e]
-    }
-
-    if (files && files.length > 0) {
-        for (var i = 0; i < files.length; i++) {
-            let compress_file = files[i].file
-            if (props.compress) {
-                compress_file = await util.compress_image(compress_file)
-            }
-
-            let params = {
-                file: compress_file
-            }
-
-            let res = await util.file_upload(params)
-            if (res.code == 200) {
-                let newUrls = []
-                if (props.modelValue && props.modelValue.length > 0)
-                    newUrls = [...props.modelValue, res.data]
-                else
-                    newUrls = [res.data]
-
-                emit('update:modelValue', newUrls)
-            }
-        }
-
-        return Promise.resolve(e)
-    }
-
-        console.log('onAfterRead', e)
-
-
-
-
-    for (var i = 0; i < files.length; i++) {
-        let params = {
-            file: files[i].file
-        }
-
-        let res = await util.file_upload(params)
-        if (res.code == 200) {
-            if(props.multiple)
-                modelValue.value = [...(modelValue.value || []), res.data]
-            else
-                modelValue.value = res.data
-        }
-    }
-
-    return Promise.resolve(e)
-}
-
-const onBeforeDelete = (e) => {
-    let newUrls = props.modelValue.filter(item => {
-        return item != e.url
-    })
-    emit('update:modelValue', newUrls)
-    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) {
-            files.value = []
-            return
-        }
-
-        files.value = props.modelValue.map(item => {
-            return {
-                url: item,
-                isImage: true
-            }
-        })
-    },
-    {
-        immediate: true
-    }
-)
-</script>
-
-<style lang="scss" scoped>
-.image-box {
-
-    .cover {
-        width: 80px;
-        height: 80px;
-    }
-}
+<template>
+    <van-field name="image" :label="props.label" :required="isRequired" :rules="props.rules" label-class="label"
+        :placeholder="props.placeholder">
+        <template #input>
+            <div class="image-box">
+                <van-uploader v-if="props.capture && (!isReadonly && !isDisabled)" v-model="files" multiple
+                    :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" multiple
+                    :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>
+</template>
+
+<script setup>
+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: {
+        type: Array,
+        default: []
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    capture: {
+        type: String,
+        default: ''
+    },
+    compress: {
+        type: Boolean,
+        default: true
+    },
+    max: {
+        type: Number,
+        default: 10000
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    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(() => {
+
+})
+
+const onAfterRead = async (e) => {
+    console.log('onAfterRead', e)
+
+    let files = []
+    if (e && Array.isArray(e) && e.length > 0) {
+        files = e
+    }else{
+        files = [e]
+    }
+
+    if (files && files.length > 0) {
+        for (var i = 0; i < files.length; i++) {
+            let compress_file = files[i].file
+            if (props.compress) {
+                compress_file = await util.compress_image(compress_file)
+            }
+
+            let params = {
+                file: compress_file
+            }
+
+            let res = await util.file_upload(params)
+            if (res.code == 200) {
+                let newUrls = []
+                if (props.modelValue && props.modelValue.length > 0)
+                    newUrls = [...props.modelValue, res.data]
+                else
+                    newUrls = [res.data]
+
+                emit('update:modelValue', newUrls)
+            }
+        }
+
+        return Promise.resolve(e)
+    }
+
+        console.log('onAfterRead', e)
+
+
+
+
+    for (var i = 0; i < files.length; i++) {
+        let params = {
+            file: files[i].file
+        }
+
+        let res = await util.file_upload(params)
+        if (res.code == 200) {
+            if(props.multiple)
+                modelValue.value = [...(modelValue.value || []), res.data]
+            else
+                modelValue.value = res.data
+        }
+    }
+
+    return Promise.resolve(e)
+}
+
+const onBeforeDelete = (e) => {
+    let newUrls = props.modelValue.filter(item => {
+        return item != e.url
+    })
+    emit('update:modelValue', newUrls)
+    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) {
+            files.value = []
+            return
+        }
+
+        files.value = props.modelValue.map(item => {
+            return {
+                url: item,
+                isImage: true
+            }
+        })
+    },
+    {
+        immediate: true
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+.image-box {
+
+    .cover {
+        width: 80px;
+        height: 80px;
+    }
+}
 </style>