widget.qw 1.0.78 → 1.0.79
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/build/style.css +1 -1
- package/build/widget.qw.es.js +26 -21
- package/build/widget.qw.umd.js +26 -21
- package/package.json +1 -1
- package/src/components/images_picker.vue +45 -37
- package/src/util/image_util.js +2 -2
package/build/style.css
CHANGED
package/build/widget.qw.es.js
CHANGED
|
@@ -11522,8 +11522,8 @@ const compress_image = (file) => __async(this, null, function* () {
|
|
|
11522
11522
|
return new Promise((resolve, reject) => {
|
|
11523
11523
|
new Compressor(file, {
|
|
11524
11524
|
quality: 0.7,
|
|
11525
|
-
maxWidth:
|
|
11526
|
-
maxHeight:
|
|
11525
|
+
maxWidth: 1024,
|
|
11526
|
+
maxHeight: 1024,
|
|
11527
11527
|
success(result) {
|
|
11528
11528
|
console.log("\u538B\u7F29\u540E\u7684\u56FE\u7247", result);
|
|
11529
11529
|
let compress_file = blob2file(result, result.name);
|
|
@@ -19943,7 +19943,7 @@ const _sfc_main$j = {
|
|
|
19943
19943
|
}
|
|
19944
19944
|
};
|
|
19945
19945
|
var ImagePicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-16be97a4"]]);
|
|
19946
|
-
var images_picker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".image-box .cover[data-v-
|
|
19946
|
+
var images_picker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".image-box .cover[data-v-92119e14] {\n width: 80px;\n height: 80px;\n}")();
|
|
19947
19947
|
const _hoisted_1$c = {
|
|
19948
19948
|
class: "image-box"
|
|
19949
19949
|
};
|
|
@@ -20019,24 +20019,29 @@ const _sfc_main$i = {
|
|
|
20019
20019
|
});
|
|
20020
20020
|
onMounted(() => {
|
|
20021
20021
|
});
|
|
20022
|
-
const onAfterRead = (
|
|
20023
|
-
console.log(
|
|
20024
|
-
|
|
20025
|
-
|
|
20026
|
-
|
|
20022
|
+
const onAfterRead = (e) => __async(this, null, function* () {
|
|
20023
|
+
console.log("onAfterRead", e);
|
|
20024
|
+
if (e && e.length > 0) {
|
|
20025
|
+
for (var i = 0; i < e.length; i++) {
|
|
20026
|
+
let compress_file = e[i].file;
|
|
20027
|
+
if (props.compress) {
|
|
20028
|
+
compress_file = yield util.compress_image(compress_file);
|
|
20029
|
+
}
|
|
20030
|
+
let params = {
|
|
20031
|
+
file: compress_file
|
|
20032
|
+
};
|
|
20033
|
+
let res = yield util.file_upload(params);
|
|
20034
|
+
if (res.code == 200) {
|
|
20035
|
+
let newUrls = [];
|
|
20036
|
+
if (props.modelValue && props.modelValue.length > 0)
|
|
20037
|
+
newUrls = [...props.modelValue, res.data];
|
|
20038
|
+
else
|
|
20039
|
+
newUrls = [res.data];
|
|
20040
|
+
emit("update:modelValue", newUrls);
|
|
20041
|
+
}
|
|
20042
|
+
}
|
|
20043
|
+
return Promise.resolve(e);
|
|
20027
20044
|
}
|
|
20028
|
-
let params = {
|
|
20029
|
-
file: compress_file
|
|
20030
|
-
};
|
|
20031
|
-
return util.file_upload(params).then((res) => {
|
|
20032
|
-
let newUrls = [];
|
|
20033
|
-
if (props.modelValue && props.modelValue.length > 0)
|
|
20034
|
-
newUrls = [...props.modelValue, res.data];
|
|
20035
|
-
else
|
|
20036
|
-
newUrls = [res.data];
|
|
20037
|
-
emit("update:modelValue", newUrls);
|
|
20038
|
-
return Promise.resolve(file);
|
|
20039
|
-
});
|
|
20040
20045
|
});
|
|
20041
20046
|
const onBeforeDelete = (e) => {
|
|
20042
20047
|
let newUrls = props.modelValue.filter((item) => {
|
|
@@ -20124,7 +20129,7 @@ const _sfc_main$i = {
|
|
|
20124
20129
|
};
|
|
20125
20130
|
}
|
|
20126
20131
|
};
|
|
20127
|
-
var ImagesPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-
|
|
20132
|
+
var ImagesPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-92119e14"]]);
|
|
20128
20133
|
var FilePicker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "[data-v-df75f4fa] .label {\n color: #000 !important;\n}\n[data-v-df75f4fa] .van-field__control:disabled {\n color: #000 !important;\n cursor: not-allowed;\n opacity: 1;\n -webkit-text-fill-color: #000;\n}")();
|
|
20129
20134
|
const _hoisted_1$b = {
|
|
20130
20135
|
class: "file-box"
|
package/build/widget.qw.umd.js
CHANGED
|
@@ -11525,8 +11525,8 @@ var __async = (__this, __arguments, generator) => {
|
|
|
11525
11525
|
return new Promise((resolve, reject) => {
|
|
11526
11526
|
new Compressor(file, {
|
|
11527
11527
|
quality: 0.7,
|
|
11528
|
-
maxWidth:
|
|
11529
|
-
maxHeight:
|
|
11528
|
+
maxWidth: 1024,
|
|
11529
|
+
maxHeight: 1024,
|
|
11530
11530
|
success(result) {
|
|
11531
11531
|
console.log("\u538B\u7F29\u540E\u7684\u56FE\u7247", result);
|
|
11532
11532
|
let compress_file = blob2file(result, result.name);
|
|
@@ -19946,7 +19946,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
19946
19946
|
}
|
|
19947
19947
|
};
|
|
19948
19948
|
var ImagePicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-16be97a4"]]);
|
|
19949
|
-
var images_picker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".image-box .cover[data-v-
|
|
19949
|
+
var images_picker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".image-box .cover[data-v-92119e14] {\n width: 80px;\n height: 80px;\n}")();
|
|
19950
19950
|
const _hoisted_1$c = {
|
|
19951
19951
|
class: "image-box"
|
|
19952
19952
|
};
|
|
@@ -20022,24 +20022,29 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20022
20022
|
});
|
|
20023
20023
|
vue.onMounted(() => {
|
|
20024
20024
|
});
|
|
20025
|
-
const onAfterRead = (
|
|
20026
|
-
console.log(
|
|
20027
|
-
|
|
20028
|
-
|
|
20029
|
-
|
|
20025
|
+
const onAfterRead = (e) => __async(this, null, function* () {
|
|
20026
|
+
console.log("onAfterRead", e);
|
|
20027
|
+
if (e && e.length > 0) {
|
|
20028
|
+
for (var i = 0; i < e.length; i++) {
|
|
20029
|
+
let compress_file = e[i].file;
|
|
20030
|
+
if (props.compress) {
|
|
20031
|
+
compress_file = yield util.compress_image(compress_file);
|
|
20032
|
+
}
|
|
20033
|
+
let params = {
|
|
20034
|
+
file: compress_file
|
|
20035
|
+
};
|
|
20036
|
+
let res = yield util.file_upload(params);
|
|
20037
|
+
if (res.code == 200) {
|
|
20038
|
+
let newUrls = [];
|
|
20039
|
+
if (props.modelValue && props.modelValue.length > 0)
|
|
20040
|
+
newUrls = [...props.modelValue, res.data];
|
|
20041
|
+
else
|
|
20042
|
+
newUrls = [res.data];
|
|
20043
|
+
emit("update:modelValue", newUrls);
|
|
20044
|
+
}
|
|
20045
|
+
}
|
|
20046
|
+
return Promise.resolve(e);
|
|
20030
20047
|
}
|
|
20031
|
-
let params = {
|
|
20032
|
-
file: compress_file
|
|
20033
|
-
};
|
|
20034
|
-
return util.file_upload(params).then((res) => {
|
|
20035
|
-
let newUrls = [];
|
|
20036
|
-
if (props.modelValue && props.modelValue.length > 0)
|
|
20037
|
-
newUrls = [...props.modelValue, res.data];
|
|
20038
|
-
else
|
|
20039
|
-
newUrls = [res.data];
|
|
20040
|
-
emit("update:modelValue", newUrls);
|
|
20041
|
-
return Promise.resolve(file);
|
|
20042
|
-
});
|
|
20043
20048
|
});
|
|
20044
20049
|
const onBeforeDelete = (e) => {
|
|
20045
20050
|
let newUrls = props.modelValue.filter((item) => {
|
|
@@ -20127,7 +20132,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20127
20132
|
};
|
|
20128
20133
|
}
|
|
20129
20134
|
};
|
|
20130
|
-
var ImagesPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-
|
|
20135
|
+
var ImagesPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-92119e14"]]);
|
|
20131
20136
|
var FilePicker_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "[data-v-df75f4fa] .label {\n color: #000 !important;\n}\n[data-v-df75f4fa] .van-field__control:disabled {\n color: #000 !important;\n cursor: not-allowed;\n opacity: 1;\n -webkit-text-fill-color: #000;\n}")();
|
|
20132
20137
|
const _hoisted_1$b = {
|
|
20133
20138
|
class: "file-box"
|
package/package.json
CHANGED
|
@@ -3,15 +3,18 @@
|
|
|
3
3
|
:placeholder="props.placeholder">
|
|
4
4
|
<template #input>
|
|
5
5
|
<div class="image-box">
|
|
6
|
-
<van-uploader v-if="props.capture && (!isReadonly && !isDisabled)" v-model="files" multiple
|
|
7
|
-
:capture="props.capture" accept="image/jpeg,image/png" :disabled="isDisabled"
|
|
6
|
+
<van-uploader v-if="props.capture && (!isReadonly && !isDisabled)" v-model="files" multiple
|
|
7
|
+
:max-count="props.max" :capture="props.capture" accept="image/jpeg,image/png" :disabled="isDisabled"
|
|
8
8
|
:deletable="!isRequired && !isDisabled" :afterRead="onAfterRead" :before-delete="onBeforeDelete"
|
|
9
9
|
:show-upload="!isReadonly" />
|
|
10
|
-
<van-uploader v-if="!props.capture && (!isReadonly && !isDisabled)" v-model="files" multiple
|
|
11
|
-
accept="image/jpeg,image/png" :disabled="isDisabled"
|
|
12
|
-
:afterRead="onAfterRead" :before-delete="onBeforeDelete"
|
|
13
|
-
|
|
14
|
-
<
|
|
10
|
+
<van-uploader v-if="!props.capture && (!isReadonly && !isDisabled)" v-model="files" multiple
|
|
11
|
+
:max-count="props.max" accept="image/jpeg,image/png" :disabled="isDisabled"
|
|
12
|
+
:deletable="!isReadonly && !isDisabled" :afterRead="onAfterRead" :before-delete="onBeforeDelete"
|
|
13
|
+
:show-upload="!isReadonly" />
|
|
14
|
+
<img class="cover" v-if="isReadonly || isDisabled" v-for="(cover, i) in previews" :key="i" :src="cover"
|
|
15
|
+
@click="onPreview(i)" />
|
|
16
|
+
<van-icon v-if="modelValue.length > props.maxPreview && (isReadonly || isDisabled)" name="ellipsis"
|
|
17
|
+
@click="onToggleMore" />
|
|
15
18
|
</div>
|
|
16
19
|
</template>
|
|
17
20
|
</van-field>
|
|
@@ -73,12 +76,12 @@ const emit = defineEmits(['update:modelValue'])
|
|
|
73
76
|
const modelValue = useVModel(props, 'modelValue', emit)
|
|
74
77
|
const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
|
|
75
78
|
const files = ref([])
|
|
76
|
-
const isPreviewMore=ref(false)
|
|
77
|
-
const previews=computed(()=>{
|
|
78
|
-
if(!modelValue.value || modelValue.value.length<1)
|
|
79
|
+
const isPreviewMore = ref(false)
|
|
80
|
+
const previews = computed(() => {
|
|
81
|
+
if (!modelValue.value || modelValue.value.length < 1)
|
|
79
82
|
return []
|
|
80
83
|
|
|
81
|
-
if(props.maxPreview > modelValue.value.length || isPreviewMore.value)
|
|
84
|
+
if (props.maxPreview > modelValue.value.length || isPreviewMore.value)
|
|
82
85
|
return modelValue.value
|
|
83
86
|
|
|
84
87
|
return modelValue.value.slice(0, props.maxPreview)
|
|
@@ -88,28 +91,34 @@ onMounted(() => {
|
|
|
88
91
|
|
|
89
92
|
})
|
|
90
93
|
|
|
91
|
-
const onAfterRead = async (
|
|
92
|
-
console.log(
|
|
94
|
+
const onAfterRead = async (e) => {
|
|
95
|
+
console.log('onAfterRead', e)
|
|
93
96
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
97
|
+
if (e && e.length > 0) {
|
|
98
|
+
for (var i = 0; i < e.length; i++) {
|
|
99
|
+
let compress_file = e[i].file
|
|
100
|
+
if (props.compress) {
|
|
101
|
+
compress_file = await util.compress_image(compress_file)
|
|
102
|
+
}
|
|
98
103
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
104
|
+
let params = {
|
|
105
|
+
file: compress_file
|
|
106
|
+
}
|
|
102
107
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
108
|
+
let res = await util.file_upload(params)
|
|
109
|
+
if (res.code == 200) {
|
|
110
|
+
let newUrls = []
|
|
111
|
+
if (props.modelValue && props.modelValue.length > 0)
|
|
112
|
+
newUrls = [...props.modelValue, res.data]
|
|
113
|
+
else
|
|
114
|
+
newUrls = [res.data]
|
|
109
115
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
116
|
+
emit('update:modelValue', newUrls)
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return Promise.resolve(e)
|
|
121
|
+
}
|
|
113
122
|
}
|
|
114
123
|
|
|
115
124
|
const onBeforeDelete = (e) => {
|
|
@@ -121,10 +130,10 @@ const onBeforeDelete = (e) => {
|
|
|
121
130
|
}
|
|
122
131
|
|
|
123
132
|
const onPreview = (i) => {
|
|
124
|
-
showImagePreview({images:modelValue.value, startPosition:i})
|
|
133
|
+
showImagePreview({ images: modelValue.value, startPosition: i })
|
|
125
134
|
}
|
|
126
135
|
|
|
127
|
-
const onToggleMore=()=>{
|
|
136
|
+
const onToggleMore = () => {
|
|
128
137
|
isPreviewMore.value = !isPreviewMore.value
|
|
129
138
|
}
|
|
130
139
|
|
|
@@ -149,12 +158,11 @@ watch(() => props.modelValue,
|
|
|
149
158
|
</script>
|
|
150
159
|
|
|
151
160
|
<style lang="scss" scoped>
|
|
161
|
+
.image-box {
|
|
152
162
|
|
|
153
|
-
.
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
width: 80px;
|
|
157
|
-
height: 80px;
|
|
158
|
-
}
|
|
163
|
+
.cover {
|
|
164
|
+
width: 80px;
|
|
165
|
+
height: 80px;
|
|
159
166
|
}
|
|
167
|
+
}
|
|
160
168
|
</style>
|
package/src/util/image_util.js
CHANGED
|
@@ -5,8 +5,8 @@ export const compress_image = async (file) => {
|
|
|
5
5
|
return new Promise((resolve, reject) => {
|
|
6
6
|
new Compressor(file, {
|
|
7
7
|
quality: 0.7,
|
|
8
|
-
maxWidth:
|
|
9
|
-
maxHeight:
|
|
8
|
+
maxWidth: 1024,
|
|
9
|
+
maxHeight: 1024,
|
|
10
10
|
success(result) {
|
|
11
11
|
console.log('压缩后的图片', result);
|
|
12
12
|
let compress_file = blob2file(result, result.name)
|