feat: 1.0 viewer
This commit is contained in:
丁锐
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="pdf-viewer" @contextmenu="handlePreventDefault">
|
||||
<div class="pdf-viewer__header">
|
||||
<ViewerPageSelector
|
||||
:total="total"
|
||||
:page.sync="page"
|
||||
:zoom="zoom"
|
||||
:controls="controls"
|
||||
:rotate.sync="rotate"
|
||||
:isFullpage="isFullpage"
|
||||
:filename="filename"
|
||||
@toggleFullpage="handleToggleFullpage"
|
||||
@update:zoom="handleUpdateZoom"
|
||||
@toggleCatalog="handleToggleCatalog"
|
||||
@print="handlePrint"
|
||||
@download="handleDownload"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pdf-viewer__body">
|
||||
<div class="loading-mask" v-if="isLoading">
|
||||
<slot name="loading">
|
||||
<div class="loading-content">Loading...</div>
|
||||
</slot>
|
||||
</div>
|
||||
<Viewer
|
||||
ref="viewer"
|
||||
:source="source"
|
||||
:page.sync="page"
|
||||
:total="total"
|
||||
:zoom="zoom"
|
||||
:catalogVisible="catalogVisible"
|
||||
:rotate="rotate"
|
||||
:style="viewerStyle"
|
||||
:isFullpage="isFullpage"
|
||||
:filename.sync="filename"
|
||||
@update:zoom="handleUpdateZoom"
|
||||
@update:isLoading="handleUpdateLoadingState"
|
||||
@password-requested="handlePasswordRequest"
|
||||
@loaded="handleLoaded"
|
||||
@loading-failed="handleLoadingFailed"
|
||||
@rendered="handleDocumentRender"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<iframe ref="iframe" style="display: none" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './assets/iconfont/iconfont.css'
|
||||
import Viewer from './components/Viewer/Viewer.vue'
|
||||
// import Viewer from './Viewer.vue'
|
||||
import ViewerPageSelector from './components/ViewerPageSelector.vue'
|
||||
|
||||
export default {
|
||||
name: 'PDFViewer',
|
||||
props: {
|
||||
source: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
controls: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
'download',
|
||||
'print',
|
||||
'double',
|
||||
'fullscreen',
|
||||
'abort',
|
||||
'fullpage',
|
||||
'rotate',
|
||||
'zoom',
|
||||
'catalog',
|
||||
'switchPage',
|
||||
]
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Viewer,
|
||||
ViewerPageSelector,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
page: 1,
|
||||
total: 1,
|
||||
catalogVisible: true,
|
||||
zoom: 100,
|
||||
rotate: 0,
|
||||
isFullpage: false,
|
||||
filename: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
viewerStyle() {
|
||||
return {
|
||||
visibility: this.isLoading ? 'hidden' : 'visible',
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleDownload() {
|
||||
this.$emit('download', this.source)
|
||||
},
|
||||
handlePrint() {
|
||||
this.$refs.viewer.print()
|
||||
},
|
||||
handlePreventDefault(evt) {
|
||||
evt.preventDefault()
|
||||
},
|
||||
handleSwitchPage(page) {
|
||||
this.page = page
|
||||
},
|
||||
handleUpdateZoom(zoom) {
|
||||
this.zoom = zoom
|
||||
},
|
||||
handleToggleFullpage() {
|
||||
this.isFullpage = !this.isFullpage
|
||||
},
|
||||
handleToggleCatalog() {
|
||||
this.catalogVisible = !this.catalogVisible
|
||||
},
|
||||
|
||||
handleLoaded(params) {
|
||||
const { total } = params
|
||||
|
||||
this.total = total
|
||||
this.$emit('loaded', params)
|
||||
},
|
||||
handleDocumentRender() {
|
||||
this.isLoading = false
|
||||
this.$emit('rendered')
|
||||
},
|
||||
handleUpdateLoadingState(isLoading) {
|
||||
this.isLoading = isLoading
|
||||
},
|
||||
handlePasswordRequest({ callback, retry }) {
|
||||
// TODO: slot dialog ?
|
||||
callback(prompt(retry ? 'Enter password again' : 'Enter password'))
|
||||
},
|
||||
handleLoadingFailed(e) {
|
||||
this.$emit('loading-failed', e)
|
||||
},
|
||||
reload() {
|
||||
this.$refs.viewer.load()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #474545;
|
||||
}
|
||||
}
|
||||
.pdf-viewer {
|
||||
// css-var
|
||||
--iron-icon-height: 20px;
|
||||
--iron-icon-width: 20px;
|
||||
--viewer-icon-ink-color: rgb(189, 189, 189);
|
||||
--viewer-pdf-toolbar-background-color: rgb(50, 54, 57);
|
||||
--viewer-text-input-selection-color: rgba(255, 255, 255, 0.3);
|
||||
--viewer-pdf-toolbar-height: 56px;
|
||||
|
||||
background-color: #ccc;
|
||||
height: 100%;
|
||||
// max-height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 500px;
|
||||
&__header {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
background-color: var(--viewer-pdf-toolbar-background-color);
|
||||
color: white;
|
||||
display: flex;
|
||||
height: var(--viewer-pdf-toolbar-height);
|
||||
padding: 0 16px;
|
||||
box-shadow: 0px 3px 10px 2px black;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
&__body {
|
||||
height: calc(100% - 56px);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.loading-mask {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
.loading-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main .logo .sub-title {
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2911558" target="_blank" class="nav-more">查看项目</a>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">高度</div>
|
||||
<div class="code-name">&#xe9c4;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">减少</div>
|
||||
<div class="code-name">&#xe62b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">设计目录</div>
|
||||
<div class="code-name">&#xe614;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">下载</div>
|
||||
<div class="code-name">&#xe7bd;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">加减组件 加号</div>
|
||||
<div class="code-name">&#xe64d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">旋转</div>
|
||||
<div class="code-name">&#xe609;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">dots</div>
|
||||
<div class="code-name">&#xe605;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">高度</div>
|
||||
<div class="code-name">&#xe600;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">24gf-printer</div>
|
||||
<div class="code-name">&#xe9c3;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1636102957536') format('woff2'),
|
||||
url('iconfont.woff?t=1636102957536') format('woff'),
|
||||
url('iconfont.ttf?t=1636102957536') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--fullpage"></span>
|
||||
<div class="name">
|
||||
高度
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--fullpage
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--minus"></span>
|
||||
<div class="name">
|
||||
减少
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--minus
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--catalog"></span>
|
||||
<div class="name">
|
||||
设计目录
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--catalog
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--download"></span>
|
||||
<div class="name">
|
||||
下载
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--download
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--plus"></span>
|
||||
<div class="name">
|
||||
加减组件 加号
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--plus
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--rotate"></span>
|
||||
<div class="name">
|
||||
旋转
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--rotate
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--dots"></span>
|
||||
<div class="name">
|
||||
dots
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--dots
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--auto-width"></span>
|
||||
<div class="name">
|
||||
高度
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--auto-width
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont pdf-viewer--printer"></span>
|
||||
<div class="name">
|
||||
24gf-printer
|
||||
</div>
|
||||
<div class="code-name">.pdf-viewer--printer
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont pdf-viewer--xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--fullpage"></use>
|
||||
</svg>
|
||||
<div class="name">高度</div>
|
||||
<div class="code-name">#pdf-viewer--fullpage</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--minus"></use>
|
||||
</svg>
|
||||
<div class="name">减少</div>
|
||||
<div class="code-name">#pdf-viewer--minus</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--catalog"></use>
|
||||
</svg>
|
||||
<div class="name">设计目录</div>
|
||||
<div class="code-name">#pdf-viewer--catalog</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--download"></use>
|
||||
</svg>
|
||||
<div class="name">下载</div>
|
||||
<div class="code-name">#pdf-viewer--download</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--plus"></use>
|
||||
</svg>
|
||||
<div class="name">加减组件 加号</div>
|
||||
<div class="code-name">#pdf-viewer--plus</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--rotate"></use>
|
||||
</svg>
|
||||
<div class="name">旋转</div>
|
||||
<div class="code-name">#pdf-viewer--rotate</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--dots"></use>
|
||||
</svg>
|
||||
<div class="name">dots</div>
|
||||
<div class="code-name">#pdf-viewer--dots</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--auto-width"></use>
|
||||
</svg>
|
||||
<div class="name">高度</div>
|
||||
<div class="code-name">#pdf-viewer--auto-width</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#pdf-viewer--printer"></use>
|
||||
</svg>
|
||||
<div class="name">24gf-printer</div>
|
||||
<div class="code-name">#pdf-viewer--printer</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2911558 */
|
||||
src: url('iconfont.woff2?t=1636102957536') format('woff2'),
|
||||
url('iconfont.woff?t=1636102957536') format('woff'),
|
||||
url('iconfont.ttf?t=1636102957536') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.pdf-viewer--fullpage:before {
|
||||
content: "\e9c4";
|
||||
}
|
||||
|
||||
.pdf-viewer--minus:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.pdf-viewer--catalog:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.pdf-viewer--download:before {
|
||||
content: "\e7bd";
|
||||
}
|
||||
|
||||
.pdf-viewer--plus:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.pdf-viewer--rotate:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.pdf-viewer--dots:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.pdf-viewer--auto-width:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.pdf-viewer--printer:before {
|
||||
content: "\e9c3";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"id": "2911558",
|
||||
"name": "pdf-viewer",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "pdf-viewer--",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "25497851",
|
||||
"name": "高度",
|
||||
"font_class": "fullpage",
|
||||
"unicode": "e9c4",
|
||||
"unicode_decimal": 59844
|
||||
},
|
||||
{
|
||||
"icon_id": "1048890",
|
||||
"name": "减少",
|
||||
"font_class": "minus",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
},
|
||||
{
|
||||
"icon_id": "1206330",
|
||||
"name": "设计目录",
|
||||
"font_class": "catalog",
|
||||
"unicode": "e614",
|
||||
"unicode_decimal": 58900
|
||||
},
|
||||
{
|
||||
"icon_id": "1722990",
|
||||
"name": "下载",
|
||||
"font_class": "download",
|
||||
"unicode": "e7bd",
|
||||
"unicode_decimal": 59325
|
||||
},
|
||||
{
|
||||
"icon_id": "2939198",
|
||||
"name": "加减组件 加号",
|
||||
"font_class": "plus",
|
||||
"unicode": "e64d",
|
||||
"unicode_decimal": 58957
|
||||
},
|
||||
{
|
||||
"icon_id": "4138746",
|
||||
"name": "旋转",
|
||||
"font_class": "rotate",
|
||||
"unicode": "e609",
|
||||
"unicode_decimal": 58889
|
||||
},
|
||||
{
|
||||
"icon_id": "6403457",
|
||||
"name": "dots",
|
||||
"font_class": "dots",
|
||||
"unicode": "e605",
|
||||
"unicode_decimal": 58885
|
||||
},
|
||||
{
|
||||
"icon_id": "6745215",
|
||||
"name": "高度",
|
||||
"font_class": "auto-width",
|
||||
"unicode": "e600",
|
||||
"unicode_decimal": 58880
|
||||
},
|
||||
{
|
||||
"icon_id": "7577336",
|
||||
"name": "24gf-printer",
|
||||
"font_class": "printer",
|
||||
"unicode": "e9c3",
|
||||
"unicode_decimal": 59843
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,57 @@
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import style from '!!css-loader!!sass-loader!./iframe.scss'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
css: String,
|
||||
},
|
||||
render(h) {
|
||||
return h('iframe', {
|
||||
on: { load: this.renderChildren },
|
||||
style: { width: '100%', height: '100%', border: 'none' },
|
||||
})
|
||||
},
|
||||
|
||||
beforeUpdate() {
|
||||
// freezing to prevent unnessessary Reactifiation of vNodes
|
||||
this.iApp.children = Object.freeze(this.$slots.default)
|
||||
},
|
||||
methods: {
|
||||
getContentWindow() {
|
||||
return this.$el.contentWindow
|
||||
},
|
||||
appendStyle(style) {
|
||||
const cssEl = document.createElement('STYLE')
|
||||
cssEl.textContent = style
|
||||
this.$el.contentDocument.head.appendChild(cssEl)
|
||||
},
|
||||
renderChildren() {
|
||||
// inject iframe styles
|
||||
this.appendStyle(style)
|
||||
if (this.css) {
|
||||
// inject component style
|
||||
this.appendStyle(this.css)
|
||||
}
|
||||
|
||||
const children = this.$slots.default
|
||||
const body = this.$el.contentDocument.body
|
||||
const el = document.createElement('DIV') // we will mount or nested app to this element
|
||||
body.appendChild(el)
|
||||
|
||||
const iApp = new Vue({
|
||||
name: 'iApp',
|
||||
// freezing to prevent unnessessary Reactifiation of vNodes
|
||||
data: { children: Object.freeze(children) },
|
||||
render(h) {
|
||||
return h('div', this.children)
|
||||
},
|
||||
})
|
||||
|
||||
iApp.$mount(el) // mount into iframe
|
||||
|
||||
this.iApp = iApp // cache instance for later updates
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,4 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<button :disabled="disabled" class="icon-btn" @click="$emit('click')">
|
||||
<Iconfont :name="name" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Iconfont from './Iconfont.vue'
|
||||
|
||||
export default {
|
||||
name: 'IconButton',
|
||||
components: {
|
||||
Iconfont,
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
disabled: Boolean,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-btn {
|
||||
margin-inline-start: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
&:hover {
|
||||
background: #5c5c5c;
|
||||
}
|
||||
&:first-child {
|
||||
margin-inline-start: 0px;
|
||||
}
|
||||
&:disabled {
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
color: rgb(134, 134, 134);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<i v-if="isFontClass" :class="className" @click="$emit('click')">
|
||||
<slot />
|
||||
</i>
|
||||
<svg v-else class="icon" aria-hidden="true">
|
||||
<use :xlink:href="icon" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
useSymbol: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'pdf-viewer--',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
icon() {
|
||||
return this.useSymbol
|
||||
? `#icon-${this.name}`
|
||||
: `${this.prefix}${this.name}`
|
||||
},
|
||||
className() {
|
||||
return `iconfont ${this.icon}`
|
||||
},
|
||||
isFontClass() {
|
||||
return !this.useSymbol
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
|
||||
.viewer-container {
|
||||
display: flex;
|
||||
background: rgb(82, 86, 89);
|
||||
height: 100%;
|
||||
.scroller {
|
||||
height: 100%;
|
||||
// scroll-behavior: smooth;
|
||||
overflow: auto;
|
||||
&.catalog {
|
||||
background: #323639;
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
transition: all 500ms ease;
|
||||
margin-left: -300px;
|
||||
&.visible {
|
||||
margin-left: 0;
|
||||
}
|
||||
.catalog-content {
|
||||
padding-bottom: 20px;
|
||||
.catalog-item {
|
||||
color: white;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
&:first-child {
|
||||
// margin-top: 0;
|
||||
}
|
||||
.catalog-index {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
.canvas {
|
||||
width: 110px;
|
||||
// height: 152px;
|
||||
opacity: 0.8;
|
||||
&.active {
|
||||
box-shadow: 0 0 0 4px rgb(84, 201, 255);
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.viewer {
|
||||
flex: 1;
|
||||
.viewer-content {
|
||||
padding-top: 20px;
|
||||
.viewer-item {
|
||||
padding-bottom: 20px;
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
page-break-after: always;
|
||||
.canvas {
|
||||
white-space: nowrap;
|
||||
// margin: 0 auto;
|
||||
// display: block;
|
||||
margin: initial;
|
||||
max-width: initial;
|
||||
// margin-bottom: 20px;
|
||||
box-shadow: 0px 0px 7px 6px rgba($color: #000000, $alpha: 0.25);
|
||||
transition: transform 300ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
html, body {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
}
|
||||
.viewer-container {
|
||||
height: auto !important;
|
||||
overflow: initial !important;
|
||||
background-color: white!important;
|
||||
.catalog {
|
||||
display: none !important;
|
||||
}
|
||||
.viewer {
|
||||
overflow: initial !important;
|
||||
height: auto !important;
|
||||
&-content {
|
||||
padding: 0!important;
|
||||
.viewer-item {
|
||||
page-break-after: always!important;
|
||||
padding: 0!important;
|
||||
.canvas {
|
||||
width: 100% !important;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.viewer-container {
|
||||
.catalog {
|
||||
margin-left: -300px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<IFrame :css="$options.style" ref="iframe">
|
||||
<div class="viewer-container" ref="container">
|
||||
<div
|
||||
class="scroller catalog"
|
||||
ref="catalogScroller"
|
||||
:class="{
|
||||
visible: catalogVisible,
|
||||
}"
|
||||
>
|
||||
<div class="catalog-content" ref="catalogContent">
|
||||
<div
|
||||
ref="catalogItem"
|
||||
v-for="page in pages"
|
||||
class="catalog-item"
|
||||
:key="page"
|
||||
>
|
||||
<div class="test" :style="thumbnailItemStyle">
|
||||
<canvas
|
||||
ref="catalogCanvas"
|
||||
class="canvas"
|
||||
:class="activePage === page && 'active'"
|
||||
:style="thumbnailStyle"
|
||||
@click="handleSwitchPage(page)"
|
||||
/>
|
||||
</div>
|
||||
<div class="catalog-index">
|
||||
{{ page }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="scroller viewer"
|
||||
ref="viewerScroller"
|
||||
@scroll="handleViewerScroll"
|
||||
>
|
||||
<div class="viewer-content" ref="viewerContent">
|
||||
<div
|
||||
v-for="page in pages"
|
||||
:key="page"
|
||||
class="viewer-item"
|
||||
:style="viewerItemStyle"
|
||||
>
|
||||
<canvas ref="viewerCanvas" class="canvas" :style="viewerStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</IFrame>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as PDF from 'pdfjs-dist/es5/build/pdf.js'
|
||||
import PDFWorker from 'pdfjs-dist/es5/build/pdf.worker.js'
|
||||
import IFrame from '../IFrame/IFrame.vue'
|
||||
import throttle from '../../utils/throttle'
|
||||
import style from '!!css-loader!!sass-loader!./Viewer.scss'
|
||||
|
||||
PDF.GlobalWorkerOptions.workerPort = new PDFWorker()
|
||||
|
||||
const MARGIN_OFFSET = 20
|
||||
const NORMAL_RATIO = 2
|
||||
|
||||
export default {
|
||||
name: 'Viewer',
|
||||
props: {
|
||||
page: Number,
|
||||
total: Number,
|
||||
zoom: Number,
|
||||
rotate: Number,
|
||||
catalogVisible: Boolean,
|
||||
isFullpage: Boolean,
|
||||
source: {
|
||||
type: [Object, String],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
style: style.toString(),
|
||||
components: {
|
||||
IFrame,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
document: null,
|
||||
viewerContentHeight: 0,
|
||||
viewportHeight: 0,
|
||||
viewportWidth: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isHorizontalViewer() {
|
||||
return (this.rotate / 90) % 2 === 1
|
||||
},
|
||||
activePage() {
|
||||
return this.page
|
||||
},
|
||||
pages() {
|
||||
return [...Array(this.total + 1).keys()].slice(1)
|
||||
},
|
||||
viewerStyle() {
|
||||
return {
|
||||
// height: `${this.zoom / NORMAL_RATIO}%`,
|
||||
width: `${(this.zoom / NORMAL_RATIO / 100) * this.viewportWidth}px`,
|
||||
transform: `rotate(${this.rotate}deg)`,
|
||||
}
|
||||
},
|
||||
viewerItemStyle() {
|
||||
return this.isHorizontalViewer
|
||||
? {
|
||||
height: `${
|
||||
(this.zoom / NORMAL_RATIO / 100) * this.viewportWidth
|
||||
}px`,
|
||||
}
|
||||
: {}
|
||||
},
|
||||
thumbnailItemStyle() {
|
||||
return this.isHorizontalViewer
|
||||
? {
|
||||
height: `${
|
||||
(this.zoom / NORMAL_RATIO / 100) * 300 // + 14 // catalog width: 300px; index height: 14px
|
||||
}px`,
|
||||
}
|
||||
: {}
|
||||
},
|
||||
thumbnailStyle() {
|
||||
return {
|
||||
transform: `rotate(${this.rotate}deg)`,
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isFullpage(n, o) {
|
||||
if (n !== o && n) {
|
||||
this.updateZoomFullpage()
|
||||
}
|
||||
},
|
||||
viewerStyle: {
|
||||
deep: true,
|
||||
async handler() {
|
||||
await this.$nextTick()
|
||||
|
||||
this.viewerContentHeight = this.$refs.viewerContent.clientHeight
|
||||
},
|
||||
},
|
||||
page(n, o) {
|
||||
if (n === o) return
|
||||
this.scrollToPage(n)
|
||||
},
|
||||
source: {
|
||||
immediate: true,
|
||||
async handler() {
|
||||
await this.load()
|
||||
this.render()
|
||||
},
|
||||
},
|
||||
},
|
||||
activated() {
|
||||
this.$nextTick(() => {
|
||||
this.handleResize()
|
||||
})
|
||||
this.render()
|
||||
},
|
||||
mounted() {
|
||||
// TODO: element resize replace window resize with Observe
|
||||
this.handleResize = throttle(() => {
|
||||
this.viewportHeight = this.$refs.container.clientHeight
|
||||
this.viewportWidth = this.$refs.viewerScroller.clientWidth
|
||||
}, 100)
|
||||
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.$nextTick(() => {
|
||||
this.handleResize()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
print() {
|
||||
const contentWindow = this.$refs.iframe.getContentWindow()
|
||||
|
||||
contentWindow?.print()
|
||||
},
|
||||
updateZoomFullpage() {
|
||||
const perViewerHeight = this.viewerContentHeight / this.total
|
||||
const rate = this.viewportHeight / (perViewerHeight - MARGIN_OFFSET)
|
||||
|
||||
this.$emit('update:zoom', this.zoom * rate)
|
||||
this.scrollToPage(this.page)
|
||||
},
|
||||
handleViewerScroll(evt) {
|
||||
this.isScrolling = true
|
||||
const yOffset = evt.target.scrollTop
|
||||
const perHeight = (this.viewerContentHeight + MARGIN_OFFSET) / this.total
|
||||
const halfViewportOffset = (perHeight - this.viewportHeight) / 2
|
||||
|
||||
const currentPosition = (yOffset - halfViewportOffset) / perHeight + 1
|
||||
const delta = currentPosition - this.page
|
||||
|
||||
let pageOffset = 0
|
||||
if (delta > 0.5) {
|
||||
pageOffset += 1
|
||||
} else if (delta < -0.5) {
|
||||
pageOffset -= 1
|
||||
}
|
||||
|
||||
this.$emit('update:page', this.page + pageOffset)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.isScrolling = false
|
||||
})
|
||||
},
|
||||
startLoading() {
|
||||
this.$emit('isLoading', true)
|
||||
},
|
||||
endLoading() {
|
||||
this.$emit('isLoading', false)
|
||||
},
|
||||
handleSwitchPage(page) {
|
||||
this.$emit('update:page', page)
|
||||
},
|
||||
async load() {
|
||||
if (!this.source) {
|
||||
return
|
||||
}
|
||||
this.startLoading()
|
||||
try {
|
||||
const filename = PDF.getFilenameFromUrl(this.source)
|
||||
this.$emit('update:filename', filename)
|
||||
|
||||
const documentLoadingTask = PDF.getDocument(this.source)
|
||||
documentLoadingTask.onPassword = (callback, reason) => {
|
||||
const retry = reason === PDF.PasswordResponses.INCORRECT_PASSWORD
|
||||
this.$emit('password-requested', {
|
||||
callback,
|
||||
retry,
|
||||
})
|
||||
}
|
||||
this.document = await documentLoadingTask.promise
|
||||
|
||||
this.$emit('loaded', {
|
||||
total: this.document.numPages,
|
||||
})
|
||||
} catch (e) {
|
||||
this.document = null
|
||||
this.$emit('loading-failed', e)
|
||||
} finally {
|
||||
this.endLoading()
|
||||
}
|
||||
},
|
||||
async render() {
|
||||
if (!this.document) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await this.$nextTick()
|
||||
|
||||
await Promise.all(
|
||||
this.pages.map(async (pageNum, i) => {
|
||||
const page = await this.document.getPage(pageNum)
|
||||
const pageWidth = page.view[2]
|
||||
const containerWidth = this.$el.clientWidth
|
||||
const targetWidth = containerWidth * 0.9
|
||||
const scale = targetWidth / pageWidth
|
||||
// const scale = Math.ceil(this.$el.clientWidth / page.view[2]) + 1
|
||||
|
||||
const viewport = page.getViewport({
|
||||
scale: scale,
|
||||
})
|
||||
// render viewer
|
||||
const viewerCanvas = this.$refs.viewerCanvas[i]
|
||||
viewerCanvas.width = viewport.width
|
||||
viewerCanvas.height = viewport.height
|
||||
|
||||
const renderViewer = page.render({
|
||||
canvasContext: viewerCanvas.getContext('2d'),
|
||||
viewport,
|
||||
}).promise
|
||||
|
||||
// render catalog
|
||||
const catalogScale = 110 / pageWidth
|
||||
const catalogViewport = page.getViewport({
|
||||
scale: catalogScale,
|
||||
})
|
||||
const catalogCanvas = this.$refs.catalogCanvas[i]
|
||||
catalogCanvas.width = catalogViewport.width
|
||||
catalogCanvas.height = catalogViewport.height
|
||||
|
||||
const renderCatalog = page.render({
|
||||
canvasContext: catalogCanvas.getContext('2d'),
|
||||
viewport: catalogViewport,
|
||||
})
|
||||
await Promise.all([renderViewer, renderCatalog])
|
||||
})
|
||||
)
|
||||
this.$emit('rendered')
|
||||
|
||||
await this.$nextTick()
|
||||
this.viewerContentHeight = this.$refs.viewerContent.clientHeight
|
||||
} catch (e) {
|
||||
this.document = null
|
||||
this.$emit('rendering-failed', e)
|
||||
}
|
||||
},
|
||||
scrollToPage(page) {
|
||||
this.syncViewerOffset(page)
|
||||
this.syncCatalogOffset(page)
|
||||
},
|
||||
syncViewerOffset(page) {
|
||||
if (this.isScrolling) return
|
||||
this.$refs.viewerCanvas[page - 1].scrollIntoView()
|
||||
},
|
||||
syncCatalogOffset(page) {
|
||||
const target = this.$refs.catalogItem[page - 1]
|
||||
|
||||
target.scrollIntoView({
|
||||
block: 'nearest',
|
||||
// FIXME: scroll smooth failed sometimes. wtf?
|
||||
// behavior: 'smooth',
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<span class="header__preview">
|
||||
<div class="start">
|
||||
<IconButton
|
||||
v-if="catalogVisible"
|
||||
name="catalog"
|
||||
@click="handleToggleCatalog"
|
||||
/>
|
||||
<div class="title">
|
||||
{{ filename }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center">
|
||||
<div id="content" v-if="switchPageVisible">
|
||||
<input
|
||||
part="input"
|
||||
type="text"
|
||||
id="pageselector"
|
||||
aria-label="页码"
|
||||
:value="page"
|
||||
@blur="handleUpdatePage"
|
||||
@keyup.enter="handleUpdatePage"
|
||||
/>
|
||||
<span id="divider">/</span>
|
||||
<span id="pagelength">{{ total }}</span>
|
||||
</div>
|
||||
|
||||
<span class="vertical-separator"></span>
|
||||
<span id="zoom-controls" v-if="zoomVisible">
|
||||
<IconButton
|
||||
name="minus"
|
||||
:disabled="isLowest"
|
||||
@click="handleModifyZoomLevel(false)"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
aria-label="缩放级别"
|
||||
:value="formatZoom"
|
||||
@blur="handleUpdateZoom($event.target.value)"
|
||||
@keyup.enter="handleUpdateZoom($event.target.value)"
|
||||
/>
|
||||
<IconButton
|
||||
name="plus"
|
||||
:disabled="isHighest"
|
||||
@click="handleModifyZoomLevel(true)"
|
||||
/>
|
||||
</span>
|
||||
<span class="vertical-separator"></span>
|
||||
<IconButton
|
||||
v-if="fullpageVisible"
|
||||
:name="mode"
|
||||
@click="handleToggleFullpage"
|
||||
/>
|
||||
<IconButton v-if="rotateVisible" name="rotate" @click="handleRotate" />
|
||||
</div>
|
||||
<div class="end">
|
||||
<IconButton
|
||||
v-if="downloadVisible"
|
||||
name="download"
|
||||
@click="handleDownload"
|
||||
/>
|
||||
<IconButton v-if="printVisible" name="printer" @click="handlePrint" />
|
||||
<!-- TODO: more action. (infos, fullscreen...) -->
|
||||
<!-- <IconButton v-if="moreVisible" name="dots" @click="handleToggleMore" /> -->
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconButton from './IconButton.vue'
|
||||
import {
|
||||
DOWNLOAD,
|
||||
PRINT,
|
||||
DOUBLE,
|
||||
FULLSCREEN,
|
||||
ABOUT,
|
||||
FULLPAGE,
|
||||
ROTATE,
|
||||
ZOOM,
|
||||
CATALOG,
|
||||
SWITCH_PAGE,
|
||||
} from '../constants/controls'
|
||||
|
||||
const NORMAL_ZOOM_LEVEL = [
|
||||
25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500,
|
||||
]
|
||||
const string2Number = str => Number(str.replace(/[^\d]/g, '')) || 1
|
||||
|
||||
export default {
|
||||
name: 'ViewerPageSelector',
|
||||
components: {
|
||||
IconButton,
|
||||
},
|
||||
props: {
|
||||
total: Number,
|
||||
page: Number,
|
||||
zoom: Number,
|
||||
rotate: Number,
|
||||
controls: Array,
|
||||
isFullpage: Boolean,
|
||||
filename: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tmpZoom: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatZoom() {
|
||||
return parseInt(this.zoom)
|
||||
},
|
||||
mode() {
|
||||
return !this.isFullpage ? 'fullpage' : 'auto-width'
|
||||
},
|
||||
lowestValue() {
|
||||
return NORMAL_ZOOM_LEVEL[0]
|
||||
},
|
||||
highestValue() {
|
||||
return NORMAL_ZOOM_LEVEL[NORMAL_ZOOM_LEVEL.length - 1]
|
||||
},
|
||||
isLowest() {
|
||||
return this.zoom <= this.lowestValue
|
||||
},
|
||||
isHighest() {
|
||||
return this.zoom >= this.highestValue
|
||||
},
|
||||
catalogVisible() {
|
||||
return this.controls.includes(CATALOG)
|
||||
},
|
||||
downloadVisible() {
|
||||
return this.controls.includes(DOWNLOAD)
|
||||
},
|
||||
printVisible() {
|
||||
return this.controls.includes(PRINT)
|
||||
},
|
||||
doubleVisible() {
|
||||
return this.controls.includes(DOUBLE)
|
||||
},
|
||||
fullscreenVisible() {
|
||||
return this.controls.includes(FULLSCREEN)
|
||||
},
|
||||
aboutVisible() {
|
||||
return this.controls.includes(ABOUT)
|
||||
},
|
||||
fullpageVisible() {
|
||||
return this.controls.includes(FULLPAGE)
|
||||
},
|
||||
rotateVisible() {
|
||||
return this.controls.includes(ROTATE)
|
||||
},
|
||||
zoomVisible() {
|
||||
return this.controls.includes(ZOOM)
|
||||
},
|
||||
switchPageVisible() {
|
||||
return this.controls.includes(SWITCH_PAGE)
|
||||
},
|
||||
moreVisible() {
|
||||
return [
|
||||
this.doubleVisible,
|
||||
this.aboutVisible,
|
||||
this.fullscreenVisible,
|
||||
].some(i => i)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleToggleFullpage() {
|
||||
// Make a copy for recovery
|
||||
if (!this.isFullpage) {
|
||||
this.tmpZoom = this.zoom
|
||||
} else {
|
||||
this.handleUpdateZoom(this.tmpZoom)
|
||||
}
|
||||
this.$emit('toggleFullpage')
|
||||
},
|
||||
handleRotate() {
|
||||
this.$emit('update:rotate', this.rotate + 90)
|
||||
},
|
||||
handleDownload() {
|
||||
this.$emit('download')
|
||||
},
|
||||
handlePrint() {
|
||||
this.$emit('print')
|
||||
},
|
||||
handleToggleMore() {
|
||||
// TODO: toggle more
|
||||
},
|
||||
handleFullscreen() {
|
||||
// TODO: fullscreen
|
||||
},
|
||||
handleModifyZoomLevel(isLevelUp) {
|
||||
const targetLevel = NORMAL_ZOOM_LEVEL.reduce((target, zoom, i) => {
|
||||
if (target) {
|
||||
return target
|
||||
}
|
||||
|
||||
const next = NORMAL_ZOOM_LEVEL[i + 1]
|
||||
|
||||
const condition = isLevelUp
|
||||
? zoom <= this.zoom && this.zoom < next
|
||||
: zoom < this.zoom && this.zoom <= next
|
||||
|
||||
if (condition) {
|
||||
if (isLevelUp) {
|
||||
return next
|
||||
} else {
|
||||
return zoom
|
||||
}
|
||||
}
|
||||
return null
|
||||
}, null)
|
||||
|
||||
this.handleUpdateZoom(targetLevel)
|
||||
},
|
||||
handleToggleCatalog() {
|
||||
this.$emit('toggleCatalog')
|
||||
},
|
||||
handleUpdatePage(evt) {
|
||||
const value = string2Number(evt.target.value)
|
||||
|
||||
this.$emit('update:page', value > this.total ? this.total : value)
|
||||
},
|
||||
handleUpdateZoom(value) {
|
||||
if (typeof value !== 'number') {
|
||||
value = string2Number(value)
|
||||
}
|
||||
const finalValue =
|
||||
value > this.highestValue
|
||||
? this.highestValue
|
||||
: value < this.lowestValue
|
||||
? this.lowestValue
|
||||
: value
|
||||
|
||||
this.$emit('update:zoom', finalValue)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header__preview {
|
||||
--page-length-digits: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.start,
|
||||
.end {
|
||||
flex: 1;
|
||||
}
|
||||
.start {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding-inline-end: 20px;
|
||||
min-width: 36px;
|
||||
.title {
|
||||
font-size: 13px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.catalog-icon {
|
||||
> svg {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
fill: var(--iron-icon-fill-color, currentcolor);
|
||||
stroke: var(--iron-icon-stroke-color, none);
|
||||
width: var(--iron-icon-width, 24px);
|
||||
height: var(--iron-icon-height, 24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
#content {
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
direction: ltr;
|
||||
display: flex;
|
||||
font-size: 0.81rem;
|
||||
text-align: center;
|
||||
--page-selector-spacing: 4px;
|
||||
#pageselector::selection {
|
||||
background-color: var(--viewer-text-input-selection-color);
|
||||
}
|
||||
|
||||
input,
|
||||
#pagelength {
|
||||
width: calc(max(2, var(--page-length-digits)) * 1ch + 1px);
|
||||
}
|
||||
|
||||
input {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
outline: none;
|
||||
padding: 0 var(--page-selector-spacing);
|
||||
text-align: center;
|
||||
max-height: var(--viewer-pdf-toolbar-height);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#divider {
|
||||
margin: 0 var(--page-selector-spacing);
|
||||
}
|
||||
}
|
||||
|
||||
#zoom-controls {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 4px;
|
||||
input {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
caret-color: currentColor;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
margin-left: 4px;
|
||||
outline: none;
|
||||
padding: 0 4px;
|
||||
text-align: center;
|
||||
width: 5ch;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.end {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-inline-start: 20px;
|
||||
text-align: end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500) {
|
||||
.header__preview {
|
||||
.start {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Vendored
+23
@@ -0,0 +1,23 @@
|
||||
export const DOWNLOAD = 'download'
|
||||
export const PRINT = 'print'
|
||||
export const DOUBLE = 'double'
|
||||
export const FULLSCREEN = 'fullscreen'
|
||||
export const ABOUT = 'about'
|
||||
export const FULLPAGE = 'fullpage'
|
||||
export const ROTATE = 'rotate'
|
||||
export const ZOOM = 'zoom'
|
||||
export const CATALOG = 'catalog'
|
||||
export const SWITCH_PAGE = 'switchPage'
|
||||
|
||||
export default [
|
||||
DOWNLOAD,
|
||||
PRINT,
|
||||
DOUBLE,
|
||||
FULLSCREEN,
|
||||
ABOUT,
|
||||
FULLPAGE,
|
||||
ROTATE,
|
||||
ZOOM,
|
||||
CATALOG,
|
||||
SWITCH_PAGE,
|
||||
]
|
||||
@@ -0,0 +1,7 @@
|
||||
import PDFViewer from './PDFViewer.vue'
|
||||
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
window.PDFViewer = PDFViewer
|
||||
}
|
||||
|
||||
export default PDFViewer
|
||||
@@ -0,0 +1,15 @@
|
||||
export default function throttle(fn, delay, ctx) {
|
||||
let isAvail = true
|
||||
return function () {
|
||||
const args = arguments
|
||||
|
||||
if (isAvail) {
|
||||
isAvail = false
|
||||
fn.apply(ctx, args)
|
||||
|
||||
setTimeout(function () {
|
||||
isAvail = true
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user