@opentinyvue/vue-image-viewer 2.21.0 → 2.22.0
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/lib/index.js +2 -6
- package/lib/mobile-first.js +48 -49
- package/package.json +13 -13
- package/lib/mobile.js +0 -348
- package/src/mobile.vue.d.ts +0 -2
package/lib/index.js
CHANGED
|
@@ -7,9 +7,8 @@ function _extends() {
|
|
|
7
7
|
return n;
|
|
8
8
|
}, _extends.apply(null, arguments);
|
|
9
9
|
}
|
|
10
|
-
import { defineComponent, $
|
|
10
|
+
import { defineComponent, $props, $setup, $prefix } from "@opentinyvue/vue-common";
|
|
11
11
|
import PcTemplate from "./pc.js";
|
|
12
|
-
import MobileTemplate from "./mobile.js";
|
|
13
12
|
import MobileFirstTemplate from "./mobile-first.js";
|
|
14
13
|
var template = function template2(mode) {
|
|
15
14
|
var _process$env;
|
|
@@ -17,9 +16,6 @@ var template = function template2(mode) {
|
|
|
17
16
|
if ("pc" === (tinyMode || mode)) {
|
|
18
17
|
return PcTemplate;
|
|
19
18
|
}
|
|
20
|
-
if ("mobile" === (tinyMode || mode)) {
|
|
21
|
-
return MobileTemplate;
|
|
22
|
-
}
|
|
23
19
|
if ("mobile-first" === (tinyMode || mode)) {
|
|
24
20
|
return MobileFirstTemplate;
|
|
25
21
|
}
|
|
@@ -138,7 +134,7 @@ var ImageViewer = defineComponent({
|
|
|
138
134
|
});
|
|
139
135
|
}
|
|
140
136
|
});
|
|
141
|
-
var version = "2.
|
|
137
|
+
var version = "2.22.0";
|
|
142
138
|
ImageViewer.install = function(Vue) {
|
|
143
139
|
Vue.component(ImageViewer.name, ImageViewer);
|
|
144
140
|
};
|
package/lib/mobile-first.js
CHANGED
|
@@ -1,12 +1,51 @@
|
|
|
1
1
|
import { renderless, api } from '@opentinyvue/vue-renderless/image-viewer/vue';
|
|
2
|
-
import {
|
|
3
|
-
import { isObject } from '@opentinyvue/
|
|
2
|
+
import { defineComponent, props, setup, directive } from '@opentinyvue/vue-common';
|
|
3
|
+
import { isObject } from '@opentinyvue/utils';
|
|
4
4
|
import Dropdown from '@opentinyvue/vue-dropdown';
|
|
5
5
|
import DropdownMenu from '@opentinyvue/vue-dropdown-menu';
|
|
6
6
|
import DropdownItem from '@opentinyvue/vue-dropdown-item';
|
|
7
7
|
import ActionSheet from '@opentinyvue/vue-action-sheet';
|
|
8
8
|
import { iconClose, iconChevronLeft, iconChevronRight, iconZoomOut, iconZoomIn, iconFullscreen, iconMinscreen, iconRepeat, iconRefres, iconDel, iconDownload, iconArrowLeft, iconArrowRight, iconEditorMenuRight, iconPicture } from '@opentinyvue/vue-icon';
|
|
9
9
|
|
|
10
|
+
function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
|
11
|
+
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
|
12
|
+
if (render) {
|
|
13
|
+
options.render = render;
|
|
14
|
+
options.staticRenderFns = staticRenderFns;
|
|
15
|
+
options._compiled = true;
|
|
16
|
+
}
|
|
17
|
+
var hook;
|
|
18
|
+
if (injectStyles) {
|
|
19
|
+
hook = injectStyles;
|
|
20
|
+
}
|
|
21
|
+
if (hook) {
|
|
22
|
+
if (options.functional) {
|
|
23
|
+
options._injectStyles = hook;
|
|
24
|
+
var originalRender = options.render;
|
|
25
|
+
options.render = function renderWithStyleInjection(h, context) {
|
|
26
|
+
hook.call(context);
|
|
27
|
+
return originalRender(h, context);
|
|
28
|
+
};
|
|
29
|
+
} else {
|
|
30
|
+
var existing = options.beforeCreate;
|
|
31
|
+
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return {
|
|
35
|
+
exports: scriptExports,
|
|
36
|
+
options
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function _extends() {
|
|
41
|
+
return _extends = Object.assign ? Object.assign.bind() : function(n) {
|
|
42
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
43
|
+
var t = arguments[e];
|
|
44
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
45
|
+
}
|
|
46
|
+
return n;
|
|
47
|
+
}, _extends.apply(null, arguments);
|
|
48
|
+
}
|
|
10
49
|
var TinyTouch = /* @__PURE__ */ function() {
|
|
11
50
|
function TinyTouch2(element, tinyBinding, type) {
|
|
12
51
|
var that = this;
|
|
@@ -46,7 +85,7 @@ var TinyTouch = /* @__PURE__ */ function() {
|
|
|
46
85
|
};
|
|
47
86
|
this.time = setTimeout(function() {
|
|
48
87
|
if (_this.tinyVueLeave && _this.tinyVueMoves) {
|
|
49
|
-
_this.touchType
|
|
88
|
+
_this.touchType === "longtap" && _this.tinyVueCallBack(_this.tinyBinding.value, e);
|
|
50
89
|
_this.tinyLongTouch = false;
|
|
51
90
|
}
|
|
52
91
|
}, 1e3);
|
|
@@ -59,25 +98,25 @@ var TinyTouch = /* @__PURE__ */ function() {
|
|
|
59
98
|
var disY = e.changedTouches[0].pageY - this.tinyVueTouches.y;
|
|
60
99
|
clearTimeout(this.time);
|
|
61
100
|
if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {
|
|
62
|
-
this.touchType
|
|
101
|
+
this.touchType === "swipe" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
63
102
|
if (Math.abs(disX) > Math.abs(disY)) {
|
|
64
103
|
if (disX > 10) {
|
|
65
|
-
this.touchType
|
|
104
|
+
this.touchType === "swiperight" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
66
105
|
}
|
|
67
106
|
if (disX < -10) {
|
|
68
|
-
this.touchType
|
|
107
|
+
this.touchType === "swipeleft" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
69
108
|
}
|
|
70
109
|
} else {
|
|
71
110
|
if (disY > 10) {
|
|
72
|
-
this.touchType
|
|
111
|
+
this.touchType === "swipedown" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
73
112
|
}
|
|
74
113
|
if (disY < -10) {
|
|
75
|
-
this.touchType
|
|
114
|
+
this.touchType === "swipeup" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
76
115
|
}
|
|
77
116
|
}
|
|
78
117
|
} else {
|
|
79
118
|
if (this.tinyLongTouch && this.tinyVueMoves) {
|
|
80
|
-
this.touchType
|
|
119
|
+
this.touchType === "tap" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
81
120
|
this.tinyVueLeave = false;
|
|
82
121
|
}
|
|
83
122
|
}
|
|
@@ -102,46 +141,6 @@ var mapDirective = function mapDirective2() {
|
|
|
102
141
|
return deactives;
|
|
103
142
|
};
|
|
104
143
|
var touchDeactives = mapDirective();
|
|
105
|
-
|
|
106
|
-
function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
|
107
|
-
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
|
108
|
-
if (render) {
|
|
109
|
-
options.render = render;
|
|
110
|
-
options.staticRenderFns = staticRenderFns;
|
|
111
|
-
options._compiled = true;
|
|
112
|
-
}
|
|
113
|
-
var hook;
|
|
114
|
-
if (injectStyles) {
|
|
115
|
-
hook = injectStyles;
|
|
116
|
-
}
|
|
117
|
-
if (hook) {
|
|
118
|
-
if (options.functional) {
|
|
119
|
-
options._injectStyles = hook;
|
|
120
|
-
var originalRender = options.render;
|
|
121
|
-
options.render = function renderWithStyleInjection(h, context) {
|
|
122
|
-
hook.call(context);
|
|
123
|
-
return originalRender(h, context);
|
|
124
|
-
};
|
|
125
|
-
} else {
|
|
126
|
-
var existing = options.beforeCreate;
|
|
127
|
-
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
return {
|
|
131
|
-
exports: scriptExports,
|
|
132
|
-
options
|
|
133
|
-
};
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
function _extends() {
|
|
137
|
-
return _extends = Object.assign ? Object.assign.bind() : function(n) {
|
|
138
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
139
|
-
var t = arguments[e];
|
|
140
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
141
|
-
}
|
|
142
|
-
return n;
|
|
143
|
-
}, _extends.apply(null, arguments);
|
|
144
|
-
}
|
|
145
144
|
var __vue2_script = defineComponent({
|
|
146
145
|
emits: ["close", "update:preview-visible", "delete", "change", "newImageList"],
|
|
147
146
|
props: [].concat(props, ["urlList", "zIndex", "onSwitch", "onClose", "showIndex", "isThumbnail", "isMenuView", "modalView", "modalHeight", "bgColor", "keepStyle"]),
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opentinyvue/vue-image-viewer",
|
|
3
|
-
"
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "2.22.0",
|
|
4
5
|
"description": "",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"sideEffects": false,
|
|
5
8
|
"main": "./lib/index.js",
|
|
6
9
|
"module": "./lib/index.js",
|
|
7
|
-
"sideEffects": false,
|
|
8
|
-
"type": "module",
|
|
9
10
|
"dependencies": {
|
|
10
|
-
"@opentinyvue/
|
|
11
|
-
"@opentinyvue/vue-
|
|
12
|
-
"@opentinyvue/vue-
|
|
13
|
-
"@opentinyvue/vue-dropdown": "~2.
|
|
14
|
-
"@opentinyvue/vue-dropdown-
|
|
15
|
-
"@opentinyvue/vue-dropdown-
|
|
16
|
-
"@opentinyvue/vue-
|
|
17
|
-
"@opentinyvue/vue-
|
|
18
|
-
"@opentinyvue/vue-theme": "~3.
|
|
11
|
+
"@opentinyvue/utils": "~2.22.0",
|
|
12
|
+
"@opentinyvue/vue-action-sheet": "~2.22.0",
|
|
13
|
+
"@opentinyvue/vue-common": "~2.22.0",
|
|
14
|
+
"@opentinyvue/vue-dropdown": "~2.22.0",
|
|
15
|
+
"@opentinyvue/vue-dropdown-item": "~2.22.0",
|
|
16
|
+
"@opentinyvue/vue-dropdown-menu": "~2.22.0",
|
|
17
|
+
"@opentinyvue/vue-icon": "~2.22.0",
|
|
18
|
+
"@opentinyvue/vue-renderless": "~3.22.0",
|
|
19
|
+
"@opentinyvue/vue-theme": "~3.22.0"
|
|
19
20
|
},
|
|
20
|
-
"license": "MIT",
|
|
21
21
|
"types": "index.d.ts",
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "pnpm -w build:ui $npm_package_name",
|
package/lib/mobile.js
DELETED
|
@@ -1,348 +0,0 @@
|
|
|
1
|
-
import { renderless, api } from '@opentinyvue/vue-renderless/image-viewer/vue';
|
|
2
|
-
import { directive, defineComponent, props, setup } from '@opentinyvue/vue-common';
|
|
3
|
-
import { iconClose, iconChevronLeft, iconChevronRight, iconZoomOut, iconZoomIn, iconRepeat, iconRefres, iconDel } from '@opentinyvue/vue-icon';
|
|
4
|
-
import { isObject } from '@opentinyvue/vue-renderless/common/type';
|
|
5
|
-
import '@opentinyvue/vue-theme-mobile/image-viewer/index.css';
|
|
6
|
-
|
|
7
|
-
var TinyTouch = /* @__PURE__ */ function() {
|
|
8
|
-
function TinyTouch2(element, tinyBinding, type) {
|
|
9
|
-
var that = this;
|
|
10
|
-
that.element = element;
|
|
11
|
-
that.tinyBinding = tinyBinding;
|
|
12
|
-
that.touchType = type;
|
|
13
|
-
that.tinyVueTouches = {
|
|
14
|
-
x: 0,
|
|
15
|
-
y: 0
|
|
16
|
-
};
|
|
17
|
-
that.tinyVueMoves = true;
|
|
18
|
-
that.tinyVueLeave = true;
|
|
19
|
-
that.tinyLongTouch = true;
|
|
20
|
-
that.tinyVueCallBack = isObject(tinyBinding.value) ? tinyBinding.value.fn : tinyBinding.value;
|
|
21
|
-
that.element.addEventListener("touchstart", function(e) {
|
|
22
|
-
that.start(e);
|
|
23
|
-
});
|
|
24
|
-
that.element.addEventListener("touchend", function(e) {
|
|
25
|
-
that.end(e);
|
|
26
|
-
});
|
|
27
|
-
that.element.addEventListener("touchmove", function(e) {
|
|
28
|
-
that.move(e);
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
var _proto = TinyTouch2.prototype;
|
|
32
|
-
_proto.start = function start(e) {
|
|
33
|
-
var _this = this;
|
|
34
|
-
if (e.touches >= 2) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
this.tinyVueMoves = true;
|
|
38
|
-
this.tinyVueLeave = true;
|
|
39
|
-
this.tinyLongTouch = true;
|
|
40
|
-
this.tinyVueTouches = {
|
|
41
|
-
x: e.changedTouches[0].pageX,
|
|
42
|
-
y: e.changedTouches[0].pageY
|
|
43
|
-
};
|
|
44
|
-
this.time = setTimeout(function() {
|
|
45
|
-
if (_this.tinyVueLeave && _this.tinyVueMoves) {
|
|
46
|
-
_this.touchType == "longtap" && _this.tinyVueCallBack(_this.tinyBinding.value, e);
|
|
47
|
-
_this.tinyLongTouch = false;
|
|
48
|
-
}
|
|
49
|
-
}, 1e3);
|
|
50
|
-
};
|
|
51
|
-
_proto.end = function end(e) {
|
|
52
|
-
if (e.touches >= 2) {
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
var disX = e.changedTouches[0].pageX - this.tinyVueTouches.x;
|
|
56
|
-
var disY = e.changedTouches[0].pageY - this.tinyVueTouches.y;
|
|
57
|
-
clearTimeout(this.time);
|
|
58
|
-
if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {
|
|
59
|
-
this.touchType == "swipe" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
60
|
-
if (Math.abs(disX) > Math.abs(disY)) {
|
|
61
|
-
if (disX > 10) {
|
|
62
|
-
this.touchType == "swiperight" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
63
|
-
}
|
|
64
|
-
if (disX < -10) {
|
|
65
|
-
this.touchType == "swipeleft" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
66
|
-
}
|
|
67
|
-
} else {
|
|
68
|
-
if (disY > 10) {
|
|
69
|
-
this.touchType == "swipedown" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
70
|
-
}
|
|
71
|
-
if (disY < -10) {
|
|
72
|
-
this.touchType == "swipeup" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
} else {
|
|
76
|
-
if (this.tinyLongTouch && this.tinyVueMoves) {
|
|
77
|
-
this.touchType == "tap" && this.tinyVueCallBack(this.tinyBinding.value, e);
|
|
78
|
-
this.tinyVueLeave = false;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
_proto.move = function move() {
|
|
83
|
-
this.tinyVueMoves = false;
|
|
84
|
-
};
|
|
85
|
-
return TinyTouch2;
|
|
86
|
-
}();
|
|
87
|
-
var mapDirective = function mapDirective2() {
|
|
88
|
-
var deactives = {};
|
|
89
|
-
var names = ["tap", "swipe", "swipeleft", "swiperight", "swipedown", "swipeup", "longtap"];
|
|
90
|
-
names.forEach(function(name) {
|
|
91
|
-
deactives[name] = directive({
|
|
92
|
-
vTouch: {
|
|
93
|
-
bind: function bind(el, tinyBinding) {
|
|
94
|
-
new TinyTouch(el, tinyBinding, name);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}).vTouch;
|
|
98
|
-
});
|
|
99
|
-
return deactives;
|
|
100
|
-
};
|
|
101
|
-
var touchDeactives = mapDirective();
|
|
102
|
-
|
|
103
|
-
function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
|
104
|
-
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
|
105
|
-
if (render) {
|
|
106
|
-
options.render = render;
|
|
107
|
-
options.staticRenderFns = staticRenderFns;
|
|
108
|
-
options._compiled = true;
|
|
109
|
-
}
|
|
110
|
-
var hook;
|
|
111
|
-
if (injectStyles) {
|
|
112
|
-
hook = injectStyles;
|
|
113
|
-
}
|
|
114
|
-
if (hook) {
|
|
115
|
-
if (options.functional) {
|
|
116
|
-
options._injectStyles = hook;
|
|
117
|
-
var originalRender = options.render;
|
|
118
|
-
options.render = function renderWithStyleInjection(h, context) {
|
|
119
|
-
hook.call(context);
|
|
120
|
-
return originalRender(h, context);
|
|
121
|
-
};
|
|
122
|
-
} else {
|
|
123
|
-
var existing = options.beforeCreate;
|
|
124
|
-
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
return {
|
|
128
|
-
exports: scriptExports,
|
|
129
|
-
options
|
|
130
|
-
};
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
function _extends() {
|
|
134
|
-
return _extends = Object.assign ? Object.assign.bind() : function(n) {
|
|
135
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
136
|
-
var t = arguments[e];
|
|
137
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
138
|
-
}
|
|
139
|
-
return n;
|
|
140
|
-
}, _extends.apply(null, arguments);
|
|
141
|
-
}
|
|
142
|
-
var __vue2_script = defineComponent({
|
|
143
|
-
props: [].concat(props, ["urlList", "zIndex", "onSwitch", "onClose", "previewVisible", "closeShow", "arrowShow", "toolShow", "showIndex", "imageFullCurrent", "startPosition", "asyncClose", "deleteButton"]),
|
|
144
|
-
components: {
|
|
145
|
-
IconClose: iconClose(),
|
|
146
|
-
IconChevronLeft: iconChevronLeft(),
|
|
147
|
-
IconChevronRight: iconChevronRight(),
|
|
148
|
-
IconZoomOut: iconZoomOut(),
|
|
149
|
-
IconZoomIn: iconZoomIn(),
|
|
150
|
-
IconRepeat: iconRepeat(),
|
|
151
|
-
IconRefres: iconRefres(),
|
|
152
|
-
IconDel: iconDel()
|
|
153
|
-
},
|
|
154
|
-
directives: _extends({}, touchDeactives),
|
|
155
|
-
setup: function setup$1(props2, context) {
|
|
156
|
-
return setup({
|
|
157
|
-
props: props2,
|
|
158
|
-
context,
|
|
159
|
-
renderless,
|
|
160
|
-
api
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
var render = function render2() {
|
|
165
|
-
var _vm = this;
|
|
166
|
-
var _h = _vm.$createElement;
|
|
167
|
-
var _c = _vm._self._c || _h;
|
|
168
|
-
return _c("transition", {
|
|
169
|
-
attrs: {
|
|
170
|
-
"name": "viewer-fade"
|
|
171
|
-
}
|
|
172
|
-
}, [_c("div", {
|
|
173
|
-
directives: [{
|
|
174
|
-
name: "show",
|
|
175
|
-
rawName: "v-show",
|
|
176
|
-
value: _vm.state.previewVisible,
|
|
177
|
-
expression: "state.previewVisible"
|
|
178
|
-
}, {
|
|
179
|
-
name: "swipeleft",
|
|
180
|
-
rawName: "v-swipeleft",
|
|
181
|
-
value: _vm.swipeLeft,
|
|
182
|
-
expression: "swipeLeft"
|
|
183
|
-
}, {
|
|
184
|
-
name: "swiperight",
|
|
185
|
-
rawName: "v-swiperight",
|
|
186
|
-
value: _vm.swipeRight,
|
|
187
|
-
expression: "swipeRight"
|
|
188
|
-
}],
|
|
189
|
-
ref: "imagePreview",
|
|
190
|
-
staticClass: "tiny-mobile-image-viewer__wrapper",
|
|
191
|
-
style: {
|
|
192
|
-
"z-index": _vm.zIndex
|
|
193
|
-
},
|
|
194
|
-
on: {
|
|
195
|
-
"click": _vm.handleVisible
|
|
196
|
-
}
|
|
197
|
-
}, [_c("div", {
|
|
198
|
-
staticClass: "tiny-mobile-image-viewer__mask"
|
|
199
|
-
}), _vm.closeShow ? _c("span", {
|
|
200
|
-
staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__close",
|
|
201
|
-
on: {
|
|
202
|
-
"click": function click($event) {
|
|
203
|
-
$event.stopPropagation();
|
|
204
|
-
return _vm.handleVisible.apply(null, arguments);
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
}, [_c("icon-close", {
|
|
208
|
-
staticClass: "tiny-svg-size"
|
|
209
|
-
})], 1) : _vm._e(), _vm.showIndex ? _c("div", {
|
|
210
|
-
staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__index"
|
|
211
|
-
}, [_vm._t("index", function() {
|
|
212
|
-
return [_c("span", {
|
|
213
|
-
staticClass: "tiny-mobile-image-viewer__index--curren"
|
|
214
|
-
}, [_vm._v(_vm._s(_vm.state.index + 1))]), _c("span", [_vm._v("/")]), _c("span", {
|
|
215
|
-
staticClass: "tiny-mobile-image-viewer__index--total"
|
|
216
|
-
}, [_vm._v(_vm._s(_vm.urlList.length))])];
|
|
217
|
-
}, {
|
|
218
|
-
"value": _vm.state.index + 1
|
|
219
|
-
})], 2) : _vm._e(), !_vm.state.isSingle && _vm.arrowShow ? [_c("span", {
|
|
220
|
-
staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__prev",
|
|
221
|
-
class: {
|
|
222
|
-
"is-disabled": !_vm.state.infinite && _vm.state.isFirst,
|
|
223
|
-
"is-arrow-disabled": _vm.state.arrowStyle === "N"
|
|
224
|
-
},
|
|
225
|
-
on: {
|
|
226
|
-
"click": function click($event) {
|
|
227
|
-
$event.stopPropagation();
|
|
228
|
-
return _vm.swipeRight.apply(null, arguments);
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}, [_c("icon-chevron-left", {
|
|
232
|
-
staticClass: "tiny-svg-size"
|
|
233
|
-
})], 1), _c("span", {
|
|
234
|
-
staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__next",
|
|
235
|
-
class: {
|
|
236
|
-
"is-disabled": !_vm.state.infinite && _vm.state.isLast,
|
|
237
|
-
"is-arrow-disabled": _vm.state.arrowStyle === "Y"
|
|
238
|
-
},
|
|
239
|
-
on: {
|
|
240
|
-
"click": function click($event) {
|
|
241
|
-
$event.stopPropagation();
|
|
242
|
-
return _vm.swipeLeft.apply(null, arguments);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
}, [_c("icon-chevron-right", {
|
|
246
|
-
staticClass: "tiny-svg-size"
|
|
247
|
-
})], 1)] : _vm._e(), _vm.toolShow ? _c("div", {
|
|
248
|
-
staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__actions"
|
|
249
|
-
}, [_c("div", {
|
|
250
|
-
staticClass: "tiny-mobile-image-viewer__actions-inner"
|
|
251
|
-
}, [_vm._t("tool", function() {
|
|
252
|
-
return [_c("icon-zoom-out", {
|
|
253
|
-
staticClass: "tiny-svg-size",
|
|
254
|
-
on: {
|
|
255
|
-
"click": function click($event) {
|
|
256
|
-
$event.stopPropagation();
|
|
257
|
-
return _vm.handleActions("zoomOut");
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
}), _c("icon-zoom-in", {
|
|
261
|
-
staticClass: "tiny-svg-size",
|
|
262
|
-
on: {
|
|
263
|
-
"click": function click($event) {
|
|
264
|
-
$event.stopPropagation();
|
|
265
|
-
return _vm.handleActions("zoomIn");
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
}), _c("icon-repeat", {
|
|
269
|
-
staticClass: "tiny-svg-size",
|
|
270
|
-
on: {
|
|
271
|
-
"click": function click($event) {
|
|
272
|
-
$event.stopPropagation();
|
|
273
|
-
return _vm.handleActions("anticlocelise");
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
}), _c("icon-refres", {
|
|
277
|
-
staticClass: "tiny-svg-size",
|
|
278
|
-
on: {
|
|
279
|
-
"click": function click($event) {
|
|
280
|
-
$event.stopPropagation();
|
|
281
|
-
return _vm.handleActions("clocelise");
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
}), _vm.deleteButton ? _c("icon-del", {
|
|
285
|
-
staticClass: "tiny-svg-size",
|
|
286
|
-
on: {
|
|
287
|
-
"click": function click($event) {
|
|
288
|
-
$event.stopPropagation();
|
|
289
|
-
return _vm.handleDelete();
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
}) : _vm._e()];
|
|
293
|
-
})], 2)]) : _vm._e(), _c("div", {
|
|
294
|
-
staticClass: "tiny-mobile-image-viewer__canvas"
|
|
295
|
-
}, [_c("div", {
|
|
296
|
-
staticClass: "tiny-mobile-image-viewer__wrap",
|
|
297
|
-
style: {
|
|
298
|
-
width: _vm.state.iamgeAllWidth + "px",
|
|
299
|
-
"transition-duration": _vm.state.imageTransition + "ms",
|
|
300
|
-
transform: "translateX(" + _vm.state.imageTransformSize + "px)"
|
|
301
|
-
}
|
|
302
|
-
}, _vm._l(_vm.state.urlList, function(url, i) {
|
|
303
|
-
return _c("div", {
|
|
304
|
-
key: i,
|
|
305
|
-
staticClass: "tiny-mobile-image-viewer__item",
|
|
306
|
-
style: Object.assign({
|
|
307
|
-
width: _vm.state.imageItemWidth + "px"
|
|
308
|
-
}, i === _vm.state.index ? _vm.state.imgStyle : "")
|
|
309
|
-
}, [_c("div", {
|
|
310
|
-
staticClass: "tiny-mobile-image-viewer__detail",
|
|
311
|
-
staticStyle: {
|
|
312
|
-
"transition-duration": "0.3s"
|
|
313
|
-
}
|
|
314
|
-
}, [_c("img", {
|
|
315
|
-
key: url,
|
|
316
|
-
ref: "img_" + i,
|
|
317
|
-
refInFor: true,
|
|
318
|
-
staticClass: "tiny-mobile-image-viewer__img",
|
|
319
|
-
class: {
|
|
320
|
-
"is-full-screen": _vm.state.fullScreen
|
|
321
|
-
},
|
|
322
|
-
attrs: {
|
|
323
|
-
"src": url
|
|
324
|
-
},
|
|
325
|
-
on: {
|
|
326
|
-
"load": _vm.handleImgLoad,
|
|
327
|
-
"error": _vm.handleImgError,
|
|
328
|
-
"mousedown": _vm.handleMouseDown,
|
|
329
|
-
"touchstart": _vm.touchstart,
|
|
330
|
-
"touchmove": _vm.touchmove,
|
|
331
|
-
"touchend": _vm.touchend
|
|
332
|
-
}
|
|
333
|
-
})])]);
|
|
334
|
-
}), 0)])], 2)]);
|
|
335
|
-
};
|
|
336
|
-
var staticRenderFns = [];
|
|
337
|
-
var __cssModules = {};
|
|
338
|
-
var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
|
|
339
|
-
function __vue2_injectStyles(context) {
|
|
340
|
-
for (var o in __cssModules) {
|
|
341
|
-
this[o] = __cssModules[o];
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
var mobile = /* @__PURE__ */ function() {
|
|
345
|
-
return __component__.exports;
|
|
346
|
-
}();
|
|
347
|
-
|
|
348
|
-
export { mobile as default };
|
package/src/mobile.vue.d.ts
DELETED