@melt-js/tpl-vue2-admin-ele 1.0.4 → 1.0.6
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/hel_dist/hel-meta.json +52 -47
- package/hel_dist/hel_userChunk_1.js +1 -1
- package/hel_dist/index.html +1 -1
- package/hel_dist/static/css/{chunk-de514d9e.00a6d6a6.css → chunk-16db41d4.9e55fc5f.css} +1 -1
- package/hel_dist/static/css/chunk-2420f532.d7e3760e.css +1 -0
- package/hel_dist/static/css/chunk-3063e94a.7fc9ba10.css +1 -0
- package/hel_dist/static/css/chunk-9f5abb9e.a52b37cc.css +1 -0
- package/hel_dist/static/css/chunk-bc100a10.1311b2f3.css +1 -0
- package/hel_dist/static/js/{app.795c6c0e.js → app.263fc370.js} +1 -1
- package/hel_dist/static/js/chunk-16db41d4.1c095d0f.js +1 -0
- package/hel_dist/static/js/chunk-2420f532.87fa8a7a.js +1 -0
- package/hel_dist/static/js/{chunk-2d0c8bf7.e76fbd59.js → chunk-2d0c8bf7.ed8bdde3.js} +1 -1
- package/hel_dist/static/js/{chunk-2d0cfaef.983821fd.js → chunk-2d0cfaef.24c21e21.js} +1 -1
- package/hel_dist/static/js/{chunk-2d0d0f79.66007c36.js → chunk-2d0d0f79.beb2e72e.js} +1 -1
- package/hel_dist/static/js/{chunk-2d0e4b0c.12dc55c2.js → chunk-2d0e4b0c.a483302f.js} +1 -1
- package/hel_dist/static/js/{chunk-2d0e4e1f.3efa9b1a.js → chunk-2d0e4e1f.84facb68.js} +1 -1
- package/hel_dist/static/js/{chunk-2d0e944c.eafa0a79.js → chunk-2d0e944c.4dd146d5.js} +1 -1
- package/hel_dist/static/js/{chunk-2d2104c6.352a4198.js → chunk-2d2104c6.78e80d97.js} +1 -1
- package/hel_dist/static/js/{chunk-2d226cab.4b42ee78.js → chunk-2d226cab.1ef817ba.js} +1 -1
- package/hel_dist/static/js/{chunk-2d229205.f2811ed1.js → chunk-2d229205.2b5e7966.js} +1 -1
- package/hel_dist/static/js/chunk-3063e94a.31cba904.js +1 -0
- package/hel_dist/static/js/{chunk-7ba44fd1.f100eb21.js → chunk-307f1e2c.c224f496.js} +6 -6
- package/hel_dist/static/js/{chunk-5eaa4e8c.da7eb5e3.js → chunk-5eaa4e8c.9d0cdf8b.js} +1 -1
- package/hel_dist/static/js/{chunk-6d379bf5.633e4797.js → chunk-6d379bf5.7ef823c5.js} +1 -1
- package/hel_dist/static/js/chunk-6f88f402.5000f5a4.js +1 -0
- package/hel_dist/static/js/{chunk-017edab0.22497e7a.js → chunk-7e81d64a.c006fe4a.js} +1 -1
- package/hel_dist/static/js/chunk-9f5abb9e.f0d084c2.js +1 -0
- package/hel_dist/static/js/chunk-bc100a10.f760a9b9.js +1 -0
- package/hel_dist/static/js/{chunk-elementUI.7e3051eb.js → chunk-elementUI.00540946.js} +1 -1
- package/hel_dist/static/js/{chunk-libs.20e3f41c.js → chunk-libs.777d85b4.js} +1 -1
- package/package.json +1 -1
- package/src/components/Screenfull/index.vue +204 -0
- package/src/components/index.js +1 -0
- package/src/entrance/libTypes.ts +1 -0
- package/src/layout/components/AppMain.vue +89 -40
- package/src/router/index.js +13 -0
- package/src/utils/fullscreen.js +128 -0
- package/src/views/ranking/index.vue +49 -0
- package/hel_dist/static/css/chunk-1a37658e.374eb871.css +0 -1
- package/hel_dist/static/css/chunk-67ce6001.3f0a3a92.css +0 -1
- package/hel_dist/static/js/chunk-1a37658e.0e1f5e21.js +0 -1
- package/hel_dist/static/js/chunk-67ce6001.90a61ef1.js +0 -1
- package/hel_dist/static/js/chunk-de514d9e.864b6f45.js +0 -1
- /package/hel_dist/static/css/{chunk-7ba44fd1.85e72a0e.css → chunk-307f1e2c.85e72a0e.css} +0 -0
- /package/hel_dist/static/css/{chunk-6d379bf5.f23be7e7.css → chunk-6d379bf5.7cd3e3c8.css} +0 -0
- /package/hel_dist/static/css/{chunk-017edab0.c58e968f.css → chunk-7e81d64a.c58e968f.css} +0 -0
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<el-tooltip
|
|
3
|
+
:content="tooltipText"
|
|
4
|
+
effect="dark"
|
|
5
|
+
placement="bottom"
|
|
6
|
+
:open-delay="300"
|
|
7
|
+
>
|
|
8
|
+
<button
|
|
9
|
+
type="button"
|
|
10
|
+
class="screenfull-btn"
|
|
11
|
+
:class="{ 'is-fullscreen': isFullscreen, 'is-disabled': !isSupported }"
|
|
12
|
+
:aria-label="tooltipText"
|
|
13
|
+
:aria-pressed="isFullscreen ? 'true' : 'false'"
|
|
14
|
+
:aria-disabled="isSupported ? 'false' : 'true'"
|
|
15
|
+
@click="toggle"
|
|
16
|
+
>
|
|
17
|
+
<svg
|
|
18
|
+
class="screenfull-icon"
|
|
19
|
+
viewBox="0 0 24 24"
|
|
20
|
+
fill="none"
|
|
21
|
+
stroke="currentColor"
|
|
22
|
+
stroke-width="2"
|
|
23
|
+
stroke-linecap="round"
|
|
24
|
+
stroke-linejoin="round"
|
|
25
|
+
aria-hidden="true"
|
|
26
|
+
focusable="false"
|
|
27
|
+
>
|
|
28
|
+
<path
|
|
29
|
+
v-if="isFullscreen"
|
|
30
|
+
d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"
|
|
31
|
+
/>
|
|
32
|
+
<path
|
|
33
|
+
v-else
|
|
34
|
+
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
|
|
35
|
+
/>
|
|
36
|
+
</svg>
|
|
37
|
+
<span v-if="showText" class="screenfull-text">{{ buttonText }}</span>
|
|
38
|
+
</button>
|
|
39
|
+
</el-tooltip>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script>
|
|
43
|
+
import {
|
|
44
|
+
FULLSCREEN_CHANGE_EVENTS,
|
|
45
|
+
exitFullscreen,
|
|
46
|
+
getFullscreenElement,
|
|
47
|
+
isFullscreenSupported,
|
|
48
|
+
requestFullscreen
|
|
49
|
+
} from '../../utils/fullscreen'
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Page fullscreen toggle.
|
|
53
|
+
*
|
|
54
|
+
* Usage:
|
|
55
|
+
* <screenfull /> // fullscreen the whole page
|
|
56
|
+
* <screenfull target="#chart-panel" /> // fullscreen one page area
|
|
57
|
+
* <screenfull show-text /> // icon + label
|
|
58
|
+
*/
|
|
59
|
+
export default {
|
|
60
|
+
name: 'Screenfull',
|
|
61
|
+
props: {
|
|
62
|
+
/**
|
|
63
|
+
* Fullscreen target: a CSS selector, an element or a function returning
|
|
64
|
+
* an element. Defaults to `document.documentElement`.
|
|
65
|
+
*/
|
|
66
|
+
target: {
|
|
67
|
+
type: [String, Object, Function],
|
|
68
|
+
default: null
|
|
69
|
+
},
|
|
70
|
+
enterText: {
|
|
71
|
+
type: String,
|
|
72
|
+
default: 'Fullscreen'
|
|
73
|
+
},
|
|
74
|
+
exitText: {
|
|
75
|
+
type: String,
|
|
76
|
+
default: 'Exit fullscreen'
|
|
77
|
+
},
|
|
78
|
+
unsupportedText: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: 'Fullscreen is not supported by this browser'
|
|
81
|
+
},
|
|
82
|
+
showText: {
|
|
83
|
+
type: Boolean,
|
|
84
|
+
default: false
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
data() {
|
|
88
|
+
return {
|
|
89
|
+
isFullscreen: false
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
computed: {
|
|
93
|
+
isSupported() {
|
|
94
|
+
return isFullscreenSupported()
|
|
95
|
+
},
|
|
96
|
+
buttonText() {
|
|
97
|
+
return this.isFullscreen ? this.exitText : this.enterText
|
|
98
|
+
},
|
|
99
|
+
tooltipText() {
|
|
100
|
+
return this.isSupported ? this.buttonText : this.unsupportedText
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
mounted() {
|
|
104
|
+
this.isFullscreen = !!getFullscreenElement()
|
|
105
|
+
FULLSCREEN_CHANGE_EVENTS.forEach(event => {
|
|
106
|
+
document.addEventListener(event, this.handleFullscreenChange)
|
|
107
|
+
})
|
|
108
|
+
},
|
|
109
|
+
beforeDestroy() {
|
|
110
|
+
FULLSCREEN_CHANGE_EVENTS.forEach(event => {
|
|
111
|
+
document.removeEventListener(event, this.handleFullscreenChange)
|
|
112
|
+
})
|
|
113
|
+
},
|
|
114
|
+
methods: {
|
|
115
|
+
handleFullscreenChange() {
|
|
116
|
+
const isFullscreen = !!getFullscreenElement()
|
|
117
|
+
if (isFullscreen === this.isFullscreen) return
|
|
118
|
+
|
|
119
|
+
this.isFullscreen = isFullscreen
|
|
120
|
+
this.$emit('change', isFullscreen)
|
|
121
|
+
},
|
|
122
|
+
resolveTarget() {
|
|
123
|
+
const { target } = this
|
|
124
|
+
if (!target) return document.documentElement
|
|
125
|
+
if (typeof target === 'function') return target()
|
|
126
|
+
if (typeof target === 'string') return document.querySelector(target)
|
|
127
|
+
return target
|
|
128
|
+
},
|
|
129
|
+
notify(message) {
|
|
130
|
+
this.$emit('error', message)
|
|
131
|
+
if (this.$message) this.$message.warning(message)
|
|
132
|
+
},
|
|
133
|
+
async toggle() {
|
|
134
|
+
if (!this.isSupported) {
|
|
135
|
+
this.notify(this.unsupportedText)
|
|
136
|
+
return
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
const target = this.resolveTarget()
|
|
140
|
+
if (!target || target.nodeType !== 1) {
|
|
141
|
+
this.notify(`Fullscreen target "${this.target}" was not found`)
|
|
142
|
+
return
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
try {
|
|
146
|
+
if (getFullscreenElement()) {
|
|
147
|
+
await exitFullscreen()
|
|
148
|
+
} else {
|
|
149
|
+
await requestFullscreen(target)
|
|
150
|
+
}
|
|
151
|
+
} catch (error) {
|
|
152
|
+
console.warn('[Screenfull] Failed to toggle fullscreen:', error)
|
|
153
|
+
this.notify('Unable to toggle fullscreen mode')
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
</script>
|
|
159
|
+
|
|
160
|
+
<style lang="scss" scoped>
|
|
161
|
+
.screenfull-btn {
|
|
162
|
+
display: inline-flex;
|
|
163
|
+
align-items: center;
|
|
164
|
+
justify-content: center;
|
|
165
|
+
margin: 0;
|
|
166
|
+
padding: 0;
|
|
167
|
+
border: 0;
|
|
168
|
+
background: transparent;
|
|
169
|
+
color: inherit;
|
|
170
|
+
font: inherit;
|
|
171
|
+
line-height: 1;
|
|
172
|
+
cursor: pointer;
|
|
173
|
+
outline: none;
|
|
174
|
+
-webkit-tap-highlight-color: transparent;
|
|
175
|
+
transition: background-color 0.3s;
|
|
176
|
+
|
|
177
|
+
&:hover {
|
|
178
|
+
background: rgba(0, 0, 0, 0.025);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
&:focus-visible {
|
|
182
|
+
outline: 2px solid #409eff;
|
|
183
|
+
outline-offset: -2px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
&.is-disabled {
|
|
187
|
+
cursor: not-allowed;
|
|
188
|
+
opacity: 0.4;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.screenfull-icon {
|
|
193
|
+
flex: none;
|
|
194
|
+
width: 20px;
|
|
195
|
+
height: 20px;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.screenfull-text {
|
|
199
|
+
margin-left: 6px;
|
|
200
|
+
font-size: 14px;
|
|
201
|
+
line-height: 1;
|
|
202
|
+
white-space: nowrap;
|
|
203
|
+
}
|
|
204
|
+
</style>
|
package/src/components/index.js
CHANGED
package/src/entrance/libTypes.ts
CHANGED
|
@@ -1,40 +1,89 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<section class="app-main">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<section class="app-main">
|
|
3
|
+
<screenfull
|
|
4
|
+
class="app-main__screenfull"
|
|
5
|
+
:target="resolveFullscreenTarget"
|
|
6
|
+
/>
|
|
7
|
+
<transition name="fade-transform" mode="out-in">
|
|
8
|
+
<router-view :key="key" />
|
|
9
|
+
</transition>
|
|
10
|
+
</section>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import Screenfull from '@/components/Screenfull'
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
name: 'AppMain',
|
|
18
|
+
components: {
|
|
19
|
+
Screenfull
|
|
20
|
+
},
|
|
21
|
+
computed: {
|
|
22
|
+
key() {
|
|
23
|
+
return this.$route.path
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
methods: {
|
|
27
|
+
// Only the page content goes fullscreen, the sidebar / navbar /
|
|
28
|
+
// breadcrumb stay outside of the fullscreen element.
|
|
29
|
+
resolveFullscreenTarget() {
|
|
30
|
+
return this.$el
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<style lang="scss" scoped>
|
|
37
|
+
.app-main {
|
|
38
|
+
/*50 = navbar */
|
|
39
|
+
min-height: calc(100vh - 50px);
|
|
40
|
+
width: 100%;
|
|
41
|
+
position: relative;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
|
|
44
|
+
.app-main__screenfull {
|
|
45
|
+
position: absolute;
|
|
46
|
+
top: 16px;
|
|
47
|
+
right: 20px;
|
|
48
|
+
z-index: 10;
|
|
49
|
+
width: 34px;
|
|
50
|
+
height: 34px;
|
|
51
|
+
border: 1px solid #e4e7ed;
|
|
52
|
+
border-radius: 6px;
|
|
53
|
+
background: #fff;
|
|
54
|
+
color: #606266;
|
|
55
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
56
|
+
transition: color 0.3s, border-color 0.3s, background-color 0.3s;
|
|
57
|
+
|
|
58
|
+
&:hover {
|
|
59
|
+
color: #409eff;
|
|
60
|
+
border-color: #c6e2ff;
|
|
61
|
+
background: #ecf5ff;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
.fixed-header+.app-main {
|
|
66
|
+
padding-top: 50px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.app-main:fullscreen,
|
|
70
|
+
.app-main:-webkit-full-screen {
|
|
71
|
+
min-height: 100vh;
|
|
72
|
+
padding-top: 0;
|
|
73
|
+
background: #fff;
|
|
74
|
+
overflow: auto;
|
|
75
|
+
|
|
76
|
+
.app-main__screenfull {
|
|
77
|
+
position: fixed;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
</style>
|
|
81
|
+
|
|
82
|
+
<style lang="scss">
|
|
83
|
+
// fix css style bug in open el-dialog
|
|
84
|
+
.el-popup-parent--hidden {
|
|
85
|
+
.fixed-header {
|
|
86
|
+
padding-right: 15px;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</style>
|
package/src/router/index.js
CHANGED
|
@@ -55,6 +55,19 @@ export const constantRoutes = [
|
|
|
55
55
|
}]
|
|
56
56
|
},
|
|
57
57
|
|
|
58
|
+
{
|
|
59
|
+
path: '/ranking',
|
|
60
|
+
component: Layout,
|
|
61
|
+
children: [
|
|
62
|
+
{
|
|
63
|
+
path: 'index',
|
|
64
|
+
name: 'Ranking',
|
|
65
|
+
component: () => import('@/views/ranking/index'),
|
|
66
|
+
meta: { title: '排行榜', icon: 'el-icon-s-data' }
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
|
|
58
71
|
{
|
|
59
72
|
path: '/example',
|
|
60
73
|
component: Layout,
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cross-browser helpers for the Fullscreen API.
|
|
3
|
+
*
|
|
4
|
+
* The standard API is used first, then the WebKit / Mozilla / Trident
|
|
5
|
+
* prefixed variants, so the screenfull button keeps working in older
|
|
6
|
+
* Safari / Edge (Legacy) builds.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
const REQUEST_METHODS = [
|
|
10
|
+
'requestFullscreen',
|
|
11
|
+
'webkitRequestFullscreen',
|
|
12
|
+
'webkitRequestFullScreen',
|
|
13
|
+
'mozRequestFullScreen',
|
|
14
|
+
'msRequestFullscreen'
|
|
15
|
+
]
|
|
16
|
+
|
|
17
|
+
const EXIT_METHODS = [
|
|
18
|
+
'exitFullscreen',
|
|
19
|
+
'webkitExitFullscreen',
|
|
20
|
+
'webkitCancelFullScreen',
|
|
21
|
+
'mozCancelFullScreen',
|
|
22
|
+
'msExitFullscreen'
|
|
23
|
+
]
|
|
24
|
+
|
|
25
|
+
const FULLSCREEN_ELEMENT_KEYS = [
|
|
26
|
+
'fullscreenElement',
|
|
27
|
+
'webkitFullscreenElement',
|
|
28
|
+
'mozFullScreenElement',
|
|
29
|
+
'msFullscreenElement'
|
|
30
|
+
]
|
|
31
|
+
|
|
32
|
+
const FULLSCREEN_ENABLED_KEYS = [
|
|
33
|
+
'fullscreenEnabled',
|
|
34
|
+
'webkitFullscreenEnabled',
|
|
35
|
+
'mozFullScreenEnabled',
|
|
36
|
+
'msFullscreenEnabled'
|
|
37
|
+
]
|
|
38
|
+
|
|
39
|
+
function findMethod(target, methods) {
|
|
40
|
+
return methods.find(method => target && typeof target[method] === 'function')
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Whether the current browser (and browsing context) allows fullscreen.
|
|
45
|
+
* `fullscreenEnabled` is `false` inside an iframe without `allowfullscreen`.
|
|
46
|
+
*
|
|
47
|
+
* @returns {boolean}
|
|
48
|
+
*/
|
|
49
|
+
export function isFullscreenSupported() {
|
|
50
|
+
if (typeof document === 'undefined') return false
|
|
51
|
+
|
|
52
|
+
const enabledKey = FULLSCREEN_ENABLED_KEYS.find(key => document[key] !== undefined)
|
|
53
|
+
if (enabledKey) return !!document[enabledKey]
|
|
54
|
+
|
|
55
|
+
// Very old implementations expose the methods without the enabled flag.
|
|
56
|
+
return !!findMethod(document.documentElement, REQUEST_METHODS)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* The element currently displayed in fullscreen, if any.
|
|
61
|
+
*
|
|
62
|
+
* @returns {Element|null}
|
|
63
|
+
*/
|
|
64
|
+
export function getFullscreenElement() {
|
|
65
|
+
if (typeof document === 'undefined') return null
|
|
66
|
+
|
|
67
|
+
const key = FULLSCREEN_ELEMENT_KEYS.find(name => !!document[name])
|
|
68
|
+
return key ? document[key] : null
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Request fullscreen for an element.
|
|
73
|
+
*
|
|
74
|
+
* @param {Element} element
|
|
75
|
+
* @returns {Promise<void>}
|
|
76
|
+
*/
|
|
77
|
+
export function requestFullscreen(element) {
|
|
78
|
+
if (!element || element.nodeType !== 1) {
|
|
79
|
+
return Promise.reject(new Error('[Screenfull] A valid target element is required'))
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const method = findMethod(element, REQUEST_METHODS)
|
|
83
|
+
if (!method) {
|
|
84
|
+
return Promise.reject(new Error('[Screenfull] The Fullscreen API is not supported'))
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
try {
|
|
88
|
+
const result = element[method]()
|
|
89
|
+
return result && typeof result.then === 'function' ? result : Promise.resolve()
|
|
90
|
+
} catch (error) {
|
|
91
|
+
return Promise.reject(error)
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Leave fullscreen mode.
|
|
97
|
+
*
|
|
98
|
+
* @returns {Promise<void>}
|
|
99
|
+
*/
|
|
100
|
+
export function exitFullscreen() {
|
|
101
|
+
if (typeof document === 'undefined') {
|
|
102
|
+
return Promise.reject(new Error('[Screenfull] The Fullscreen API is not supported'))
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
const method = findMethod(document, EXIT_METHODS)
|
|
106
|
+
if (!method) {
|
|
107
|
+
return Promise.reject(new Error('[Screenfull] The Fullscreen API is not supported'))
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
try {
|
|
111
|
+
const result = document[method]()
|
|
112
|
+
return result && typeof result.then === 'function' ? result : Promise.resolve()
|
|
113
|
+
} catch (error) {
|
|
114
|
+
return Promise.reject(error)
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Events fired by the different browser implementations.
|
|
120
|
+
*
|
|
121
|
+
* @type {string[]}
|
|
122
|
+
*/
|
|
123
|
+
export const FULLSCREEN_CHANGE_EVENTS = [
|
|
124
|
+
'fullscreenchange',
|
|
125
|
+
'webkitfullscreenchange',
|
|
126
|
+
'mozfullscreenchange',
|
|
127
|
+
'MSFullscreenChange'
|
|
128
|
+
]
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ranking-page">
|
|
3
|
+
<div class="ranking-page__header">
|
|
4
|
+
<h2 class="ranking-page__title">从夯到拉排行榜</h2>
|
|
5
|
+
<p class="ranking-page__desc">
|
|
6
|
+
图片可拖拽到评级行,也可在评级行与图片库之间互相拖拽;拖到“-”区域删除,点击图片可放大。
|
|
7
|
+
点击评级名称可改名,点击名称后右侧会出现改色和删除按钮。
|
|
8
|
+
</p>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<!-- 引用 comps-vue2-ele 暴露的远程组件(pnpm workspace 链接到 comps 源码,始终使用最新实现) -->
|
|
12
|
+
<tier-ranking />
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
import comps from '@melt-js/comps-vue2-ele/src/components'
|
|
18
|
+
|
|
19
|
+
export default {
|
|
20
|
+
name: 'Ranking',
|
|
21
|
+
components: {
|
|
22
|
+
TierRanking: comps.TierRanking
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<style lang="scss" scoped>
|
|
28
|
+
.ranking-page {
|
|
29
|
+
padding: 20px;
|
|
30
|
+
|
|
31
|
+
&__header {
|
|
32
|
+
margin-bottom: 16px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&__title {
|
|
36
|
+
margin: 0 0 8px;
|
|
37
|
+
font-size: 20px;
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
color: #303133;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&__desc {
|
|
43
|
+
margin: 0;
|
|
44
|
+
font-size: 13px;
|
|
45
|
+
line-height: 1.7;
|
|
46
|
+
color: #909399;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
h3[data-v-6a70deaf]{margin:40px 0 0}ul[data-v-6a70deaf]{list-style-type:none;padding:0}li[data-v-6a70deaf]{display:inline-block;margin:0 10px}a[data-v-6a70deaf]{color:#42b983}#app[data-v-1338c4ec]{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}.dashboard-container[data-v-081b6298]{margin:30px}.dashboard-text[data-v-081b6298]{font-size:30px;line-height:46px}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.svg-icon[data-v-e08fc41e]{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}.svg-external-icon[data-v-e08fc41e]{background-color:currentColor;-webkit-mask-size:cover!important;mask-size:cover!important;display:inline-block}.hamburger[data-v-49e15297]{display:inline-block;vertical-align:middle;width:20px;height:20px}.hamburger.is-active[data-v-49e15297]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(window["helJsonp_tpl-vue2-admin-ele_1793867555914"]=window["helJsonp_tpl-vue2-admin-ele_1793867555914"]||[]).push([["chunk-1a37658e"],{"07eb":function(e,t,o){"use strict";o("daa4")},"5abf":function(e,t,o){"use strict";o("8300")},"6d9b":function(e,t,o){},8300:function(e,t,o){},9406:function(e,t,o){"use strict";o.r(t);o("3e81");var n=function(){var e=this,t=e._self._c;return t("div",{staticClass:"dashboard-container"},[t("div",{staticClass:"dashboard-text"},[e._v("name: "+e._s(e.name))]),t("HelloWorld",{attrs:{msg:"tpl 直接渲染 comps 的最新源码"}})],1)},l=[],a=o("22cb"),s=o("f6fb"),c=function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"app"}},[t("img",{attrs:{alt:"Vue logo",src:o("d8ce")}}),t("h2",[e._v("name: "+e._s(e.name))]),t("HelloWorld",{attrs:{msg:"Welcome to view project hel-tpl-remote-vue-comp ( from unpkg deploy )"}})],1)},r=[],i=function(){var e=this,t=e._self._c;return t("div",{staticClass:"hello"},[t("hr"),t("h1",[e._v(e._s(e.msg))]),t("h2",[e._v("I am a remote vue compoent8888")])])},u=[],p={name:"HelloWorld",components:{},props:{msg:String}},d=p,m=(o("07eb"),o("ad2c")),f=Object(m["a"])(d,i,u,!1,null,"6a70deaf",null),b=f.exports,v={name:"App",components:{HelloWorld:b},props:{name:String}},_=v,h=(o("5abf"),Object(m["a"])(_,c,r,!1,null,"1338c4ec",null)),g=h.exports,W={App:g,HelloWorld:b},H={name:"Dashboard",components:{HelloWorld:W.HelloWorld},computed:Object(a["a"])({},Object(s["b"])(["name"]))},j=H,w=(o("e971"),Object(m["a"])(j,n,l,!1,null,"081b6298",null));t["default"]=w.exports},d8ce:function(e,t,o){e.exports=o.p+"static/img/logo.82b9c7a5.png"},daa4:function(e,t,o){},e971:function(e,t,o){"use strict";o("6d9b")}}]);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(window["helJsonp_tpl-vue2-admin-ele_1793867555914"]=window["helJsonp_tpl-vue2-admin-ele_1793867555914"]||[]).push([["chunk-67ce6001"],{"13be":function(t,e,n){"use strict";var r=n("e605"),c=n("99a5").trim,s=n("4d47");r({target:"String",proto:!0,forced:s("trim")},{trim:function(){return c(this)}})},"2c99":function(t,e,n){},"4d47":function(t,e,n){"use strict";var r=n("6cc4").PROPER,c=n("2c8d"),s=n("99e9"),i="
";t.exports=function(t){return c((function(){return!!s[t]()||i[t]()!==i||r&&s[t].name!==t}))}},"4f1e":function(t,e,n){"use strict";var r=function(){var t=this,e=t._self._c;return e("div",{staticStyle:{padding:"0 15px"},on:{click:t.toggleClick}},[e("svg",{staticClass:"hamburger",class:{"is-active":t.isActive},attrs:{viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",width:"64",height:"64"}},[e("path",{attrs:{d:"M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"}})])])},c=[],s={name:"Hamburger",props:{isActive:{type:Boolean,default:!1}},methods:{toggleClick:function(){this.$emit("toggleClick")}}},i=s,a=(n("8dd0"),n("ad2c")),o=Object(a["a"])(i,r,c,!1,null,"49e15297",null);e["a"]=o.exports},6036:function(t,e,n){"use strict";var r=n("e605"),c=n("d62a");r({target:"RegExp",proto:!0,forced:/./.exec!==c},{exec:c})},"61f7":function(t,e,n){"use strict";n.d(e,"a",(function(){return r})),n.d(e,"b",(function(){return c}));n("6036"),n("92c2"),n("13be");function r(t){return/^(https?:|mailto:|tel:)/.test(t)}function c(t){var e=["admin","editor"];return e.indexOf(t.trim())>=0}},6480:function(t,e,n){},"6c72":function(t,e,n){"use strict";n.r(e);var r={};n.r(r),n.d(r,"SvgIcon",(function(){return c["a"]})),n.d(r,"Hamburger",(function(){return s["a"]}));var c=n("c00a"),s=n("4f1e");e["default"]=r},"8dd0":function(t,e,n){"use strict";n("2c99")},"90e0":function(t,e,n){"use strict";var r=n("2c8d"),c=n("ff10"),s=c.RegExp;t.exports=r((function(){var t=s("(?<a>b)","g");return"b"!==t.exec("b").groups.a||"bc"!=="b".replace(t,"$<a>c")}))},"92c2":function(t,e,n){"use strict";n("6036");var r=n("e605"),c=n("a86f"),s=n("ed76"),i=n("083c"),a=n("b1de"),o=function(){var t=!1,e=/[ac]/;return e.exec=function(){return t=!0,/./.exec.apply(this,arguments)},!0===e.test("abc")&&t}(),u=/./.test;r({target:"RegExp",proto:!0,forced:!o},{test:function(t){var e=i(this),n=a(t),r=e.exec;if(!s(r))return c(u,e,n);var o=c(r,e,n);return null!==o&&(i(o),!0)}})},"95bf":function(t,e,n){"use strict";var r=n("2c8d"),c=n("ff10"),s=c.RegExp;t.exports=r((function(){var t=s(".","s");return!(t.dotAll&&t.test("\n")&&"s"===t.flags)}))},"99a5":function(t,e,n){"use strict";var r=n("155d"),c=n("5bf4"),s=n("b1de"),i=n("99e9"),a=r("".replace),o=RegExp("^["+i+"]+"),u=RegExp("(^|[^"+i+"])["+i+"]+$"),l=function(t){return function(e){var n=s(c(e));return 1&t&&(n=a(n,o,"")),2&t&&(n=a(n,u,"$1")),n}};t.exports={start:l(1),end:l(2),trim:l(3)}},"99e9":function(t,e,n){"use strict";t.exports="\t\n\v\f\r \u2028\u2029\ufeff"},ad2c:function(t,e,n){"use strict";function r(t,e,n,r,c,s,i,a){var o,u="function"===typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),s&&(u._scopeId="data-v-"+s),i?(o=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),c&&c.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},u._ssrRegister=o):c&&(o=a?function(){c.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:c),o)if(u.functional){u._injectStyles=o;var l=u.render;u.render=function(t,e){return o.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,o):[o]}return{exports:t,options:u}}n.d(e,"a",(function(){return r}))},bb37:function(t,e,n){"use strict";var r=n("2c8d"),c=n("ff10"),s=c.RegExp,i=r((function(){var t=s("a","y");return t.lastIndex=2,null!==t.exec("abcd")})),a=i||r((function(){return!s("a","y").sticky})),o=i||r((function(){var t=s("^r","gy");return t.lastIndex=2,null!==t.exec("str")}));t.exports={BROKEN_CARET:o,MISSED_STICKY:a,UNSUPPORTED_Y:i}},c00a:function(t,e,n){"use strict";var r=function(){var t=this,e=t._self._c;return t.isExternal?e("div",t._g({staticClass:"svg-external-icon svg-icon",style:t.styleExternalIcon},t.$listeners)):e("svg",t._g({class:t.svgClass,attrs:{"aria-hidden":"true"}},t.$listeners),[e("use",{attrs:{"xlink:href":t.iconName}})])},c=[],s=n("61f7"),i={name:"SvgIcon",props:{iconClass:{type:String,required:!0},className:{type:String,default:""}},computed:{isExternal:function(){return Object(s["a"])(this.iconClass)},iconName:function(){return"#icon-".concat(this.iconClass)},svgClass:function(){return this.className?"svg-icon "+this.className:"svg-icon"},styleExternalIcon:function(){return{mask:"url(".concat(this.iconClass,") no-repeat 50% 50%"),"-webkit-mask":"url(".concat(this.iconClass,") no-repeat 50% 50%")}}}},a=i,o=(n("e5c3"),n("ad2c")),u=Object(o["a"])(a,r,c,!1,null,"e08fc41e",null);e["a"]=u.exports},d3b8:function(t,e,n){"use strict";var r=n("083c");t.exports=function(){var t=r(this),e="";return t.hasIndices&&(e+="d"),t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.dotAll&&(e+="s"),t.unicode&&(e+="u"),t.unicodeSets&&(e+="v"),t.sticky&&(e+="y"),e}},d62a:function(t,e,n){"use strict";var r=n("a86f"),c=n("155d"),s=n("b1de"),i=n("d3b8"),a=n("bb37"),o=n("dcb7"),u=n("47a4"),l=n("c835").get,f=n("95bf"),d=n("90e0"),v=o("native-string-replace",String.prototype.replace),p=RegExp.prototype.exec,g=p,x=c("".charAt),h=c("".indexOf),m=c("".replace),b=c("".slice),_=function(){var t=/a/,e=/b*/g;return r(p,t,"a"),r(p,e,"a"),0!==t.lastIndex||0!==e.lastIndex}(),E=a.BROKEN_CARET,I=void 0!==/()??/.exec("")[1],C=_||I||E||f||d,R=function(t,e){for(var n=t.groups=u(null),r=0;r<e.length;r++){var c=e[r];n[c[0]]=t[c[1]]}};C&&(g=function(t){var e,n,c,a=this,o=l(a),u=s(t),f=o.raw;if(f)return f.lastIndex=a.lastIndex,e=r(g,f,u),a.lastIndex=f.lastIndex,e&&o.groups&&R(e,o.groups),e;var d=o.groups,C=E&&a.sticky,y=r(i,a),S=a.source,w=0,$=u;if(C){y=m(y,"y",""),-1===h(y,"g")&&(y+="g"),$=b(u,a.lastIndex);var k=a.lastIndex>0&&x(u,a.lastIndex-1);a.lastIndex>0&&(!a.multiline||a.multiline&&"\n"!==k&&"\r"!==k&&"\u2028"!==k&&"\u2029"!==k)&&(S="(?: (?:"+S+"))",$=" "+$,w++),n=new RegExp("^(?:"+S+")",y)}I&&(n=new RegExp("^"+S+"$(?!\\s)",y)),_&&(c=a.lastIndex);var O=r(p,C?n:a,$);return C?O?(O.input=u,O[0]=b(O[0],w),O.index=a.lastIndex,a.lastIndex+=O[0].length):a.lastIndex=0:_&&O&&(a.lastIndex=a.global?O.index+O[0].length:c),I&&O&&O.length>1&&r(v,O[0],n,(function(){for(var t=1;t<arguments.length-2;t++)void 0===arguments[t]&&(O[t]=void 0)})),O&&d&&R(O,d),O}),t.exports=g},e5c3:function(t,e,n){"use strict";n("6480")}}]);
|